Redux-Form: Field (Array) состоит из 2 или более полей?

Question

У меня есть (простая?) Форма, которая должна собирать некоторые данные и отправлять их бэкэнду. В данных у меня есть свойство под названием personnel, которое представляет собой массив, содержащий объекты в форме {id: 123, name: "User", role: 'some_role'}. Пользователь должен иметь возможность выбрать человека из раскрывающегося списка и роль из другого, а затем нажать кнопку, чтобы передать его в массив:

• id и user исходят от пользователя, выбирающего из react-select упаковщик для redux-form
• role происходит из другого экземпляра react-select оболочки

Проблема, с которой я сейчас сталкиваюсь, состоит в том, чтобы соединить эти две части вместе и поместить их в поле personnel. Как бы я это сделал?

В моем компоненте у меня есть следующее:

  renderSelect(formValues) {
    return <RFReactSelect {...formValues} />;
  } 
  ...
  onPersonnelSelected(personnel) {
    // this does nothing atm
  }
  ...
  render() {
        ...
            <div class="row">
                <div class="col-sm">
                  <FieldArray
                    name="personnel"
                    label="Personnel"
                    component={this.renderSelect}
                    options={this.props.members}
                    labelKey={option => option.name}
                    valueKey={option => option.id}
                    value={this.props.personnel}
                    onChange={this.onPersonnelSelected}
                  />
                </div>
                <div class="col-sm">
                  <Field
                    name="role"
                    label="Role"
                    component={this.renderRoles}
                  />
                </div>
                <div class="col-sm">
                  <label>&nbsp;</label>
                  <button
                    type="button"
                    className="btn btn-primary"
                    onClick={this.onPersonnelSelected}
                  >
                    Add Personnel
                  </button>
                </div>
              </div>
         }

Моя проблема в том, что теперь я знаю, как объединить эти 2, когда пользователь нажимает кнопку и помещает их в массив personnel.

Спасибо.

Answer 1

Если бы у каждого человека была своя роль, я бы немного изменил форму, переместив поле role внутрь this.renderSelect.

Глядя на учебник FieldArray , вы должны сопоставить каждое поле с именем, например

// field 1
name={`${person}.name`}

// field 2
name={`${person}.role`}

Таким образом, у вас будет 2 поля вместо 1.

Таким образом, когда Add button запускает fields.push({}), все подполя станут свойствами перемещаемого объекта.

Чтобы «соединить» эту логику с react-select Я полагаю, вы можете использовать RFReactSelect вместо Field