Как реализовать динамический select?

Question

[Антон Измайлов]

Мда. Ситуация бред.

Что имеется - ReactJS, массив с n-работников аля

{
id: 1,
name: 'вася'
},
{
id: 2,
name: 'petya'
}

Нужно сделать динамическую форму для добавления этих ребят в абстрактное действо (передать массив с ними в api)

Формочка включает в себя по дефолту селектор с выбором, но можно динамически добавлять еще один селектор и выбрать оставшихся воркеров. Как реализовать такое? Пробовал помечать выбранных воркеров или удалять их из массива, но тогда палку в колеса вставляет сам реакт - он перерендеривает весь компонент и выбранные воркеры будут удалены из выбранных ранее, потому что у них есть отметка.

Очень сумбурно все описал, но надеюсь кто-то поймет и сможет подсказать, ниже приложу пример формочки, надеюсь с ним будет проще

Answer 1

[Никита Гущин]

С redux'ом это будет выглядеть вот так:
erikras.github.io/redux-form/#/examples/deep?_k=3m09yp

UPD1. Примерно так будет выглядеть. Но я бы фильтр списка работников поместил в select. Тогда вам нужно будет получать из стора значения формы и тоже самое делать + можно использовать reselect для оптимизации всего этого дела

UPD2. Я обновил код немного. Старая версия не работала...

class MyForm extends Component {
  render() {
    const { handleSubmit, fields: { workers }, workersList } = this.props
    const selectedWorkersIds = workers.map(workerField => workerField.value.id)
    const finalWorkersList = workersList.filter(
      worker => selectedWorkersIds.indexOf(worker.id) === -1
    )
    return (
      <form onSubmit={handleSubmit}>
        <WorkersMultiInput
          field={workers}
          workersList={finalWorkersList}
          />
      </form>
    )
  }
}

class WorkersMultiInput extends Component {
  render() {
    const { field, workersList } = this.props

    return (
      <div>
        {
           field.map((workerField, i) => {
             // Просто добавим в список выбранного воркера 
             const finalWorkerList = [ workerField.value, ...workersList ]            
             return (
               <WorkerInput key={i} field={workerField} workersList={finalWorkersList} />
             )
           }
        }
      </div>
    )
  }
}

Comments

[Антон Измайлов]

Кнопка Add уже функционирует (как раз redux-form юзаю для этого). Мне нужно из общего массива после выбора воркера исключать его из последующих слоев (т.е. из следующих селекторов)

[Никита Гущин]

Антон Измайлов: я обновил ответ. Старая версия была с багом)