将 React-Select 与 React-Final-Form 结合使用

Question

我在 React-Final Form 中使用 React-Select。当使用 React-Select 选择一个选项时，它会传递一个对象而不是单个值示例 {label: Foo, value: 100}。我只需要将“值”传回服务器即可。在 Redux-Forms 中你可以做到 props.change()，但这似乎不是这个 React-Final-Forms 的一个选项。我已经尝试编写 onChange 函数来存储状态中的东西，但是当我这样做时，React-Select 输入不再具有值。

表格


onSubmit = (data) => {
    if (data.incidentNumber) {
      //incident being
      this.props.incidentActions.editincident(data);
    } else {
      //new incident is being created
      this.props.incidentActions.createnewincident(data);
    }
  };

ReactSelectAdapter = ({ input, ...rest }) => (
    <Select {...input} {...rest} searchable />
  );

<Form
        onSubmit={this.onSubmit}
        render={({ handleSubmit, form, submitting, pristine, values }) => (
          <form onSubmit={handleSubmit}>
            <Row>
              <Col>
                <Label label="Water System" htmlFor="systemId" required />
                  <Field
                    name="systemId"
                    component={this.ReactSelectAdapter}
                    options={systems}
                    className="mb-2"
                  />
              </Col>
            </Row>
            .... more fields

提交的表格数据示例：

 {
   "systemId":{"label":"ACME WATERSYSTEM","value":577},
   "description":"a water system"
}

如何让它只返回：

{
   "systemId":577,
   "description":"a water system"
}

Answer 1

您可以在 onSubmit 中进行一些转换以获得所需的格式。类似于：

onSubmit = (data) => {
    data = {
        ...data,
        systemId: data.systemId ? data.systemId.value : null,
    };

    if (data.incidentNumber) {
      //incident being
      this.props.incidentActions.editincident(data);
    } else {
      //new incident is being created
      this.props.incidentActions.createnewincident(data);
    }
  };

将 React-Select 与 React-Final-Form 结合使用

Using React-Select with React-Final-Form

reactjs

react-final-form