将 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);
    }
  };