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字段移到内部{em> this.renderSelect。

看着FieldArray tutorial，您必须使用类似的名称来映射每个字段

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

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

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

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

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

Redux-Form：Field（Array）由2个或多个字段组成？

1 个答案: