Using React-Select with React-Final-Form

Question

我在React-Final Form中使用React-Select。当使用React-Select选择一个选项时，它会传递一个对象，而不是一个单值示例{label: Foo, value: 100}。我只需要传递value;回到服务器。在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);
}
};