如何让react-select与react-final-form正确集成

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-final-form中使用react-select的例子：https://codesandbox.io/s/40mr0v2r87。

您应该添加一个适配器：

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

然后你可以把它当做一个组件使用：

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

Answer 2

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

值{selectFieldId：“

”}

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>

on submit方法：

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