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>
         }

我的问题是，当用户点击按钮并将它们推送到personnel数组时，我现在知道如何将这两个合并在一起。

谢谢。

Answer 1

如果每个人都有自己的角色，我会重新设计一下这个形状，移动role内的this.renderSelect字段。

看看FieldArray tutorial，你必须用一个名字映射每个字段

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

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

所以你要有2个而不是1个。

这样，当Add button运行fields.push({})时，所有子字段都将成为被推送对象的属性。

要将这个逻辑“连接”到react-select我假设你可以使用RFReactSelect代替Field