Redux-Form：由 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。

查看FieldArraytutorial，您必须将每个字段映射为类似的名称

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

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

所以你将拥有 2 个字段而不是 1 个。

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

要将此逻辑“连接”到react-select，我假设您可以使用RFReactSelect 代替Field