我怎样才能让反应选择与反应最终形式正确集成

Question

我正在使用react-final-form发送一些基本的用户数据。名字、姓氏、电子邮件和下拉值，其中包含他们与我联系的原因。我尝试了以下内容(react-final-form的文档上的自定义输入部分(：

<Field name="myField">
{props => (
<div>
<Select
options={colourOptions}
className="basic-multi-select"
classNamePrefix="select"
onChange={props.input.onChange}
/>
</div>
)}
</Field>

我的猜测是可能与onChange道具有一些碰撞？不确定，但下拉列表中的信息未被react-final-form选取并在提交时传递给<form>。

Answer 1

有一个关于如何将react-select与react-final-form一起使用的示例：https://codesandbox.io/s/40mr0v2r87。

您应该添加一个适配器：

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

然后，您可以将其用作组件：

<Field
name="state"
component={ReactSelectAdapter}
options={states}
/>

Answer 2

这是我的方法。我决定初始值和将发送到服务器的值的问题。就像：

{selectFieldId： "value"}

import React from "react";
import { FieldRenderProps } from "react-final-form";
import Select, { ValueType } from "react-select";
type Option = {
label: string;
value: string;
};
export const CustomSelect = ({ input, options, ...rest }: FieldRenderProps<string, HTMLElement>) => {
const handleChange = (option: ValueType<Option, false>) => {
input.onChange(option?.value);
};
return (
<Select
{...input}
{...rest}
onChange={handleChange}
options={options}
value={options ? options.find((option: Option) => option.value === input.value) : ""}
/>
);
};
export default CustomSelect;

Answer 3

以一种简单的方式，我是这样做的：

const locationOptions = [
{ value: 1, label: "ADEN" },
{ value: 2, label: "MUKALLA" },
{ value: 3, label: "TAIZ" },
];
<Field name="location_id">
{({ input }) => (
<Select
options={locationOptions}
placeholder="Select Location"
{...input}
/>
)}
</Field>

提交时方法：

const onSubmit = (data) => {
console.log(data);
};