使用 react-select 和 react-hook-form 返回正确的值答案

【问题标题】：Returning correct value using react-select and react-hook-form使用 react-select 和 react-hook-form 返回正确的值
【发布时间】：2020-10-28 22:17:06
【问题描述】：

我在 AsyncSelect 周围使用 react-hook-forms Controller api，从 react-select 加载选项，因为用户从外部 API 键入。一切正常，除了返回值作为字符串 "[object Object]" 而不是对象的 fullName 属性返回。

我的组件：

           <Controller
            control={control}
            name="businessCategory"
            as={
              <AsyncSelect
                className="react-select-container"
                loadOptions={v => handleAutocompleteLookup(v)}
                onChange={handleCategoryInputChange}
                getOptionLabel={option => option.name}
                getOptionValue={option => option.fullName}
              />
            }
          />

我的 handleChange 函数。 SetValue 来自 react-hook-form：

  const handleCategoryInputChange = newValue => {
    return setValue('businessCategory', newValue, true);
  };

我的任何数据都是具有以下形状的对象数组：

{
  fullName: "DJ service"
  id: "gcid:dj"
  name: "DJ service"
  publisher: "GMB"
}

如有任何线索，我们将不胜感激，谢谢！

【问题讨论】：

标签： reactjs react-select react-hook-form

【解决方案1】：

通过 react-hook-form 使用自定义寄存器来解决此问题，如下所示：

https://react-hook-form.com/get-started#Registerfields

【讨论】：

【解决方案2】：

我让它像这样工作：

const options = [
    {value: '', label: ''}
]

import { useForm, Controller } from "react-hook-form";

import { ErrorMessage } from "@hookform/error-message";

import Select from "react-select";


const methods = useForm();


<section>
    <label>Label</label>

    <Controller
      as={Select}
      name="Name"
      options={options}
      isMulti
      control={methods.control}
    />

    <ErrorMessage errors={methods.errors} name="Name" />
</section>

【讨论】：

我可以确认这很有魅力。只是为其他人添加，将所有 Select 道具传递到控制器中。
它在控制器上抛出TypeError: props.render is not a function

【解决方案3】：

按以下方式更新您的代码

在您的导入中

import { useForm, Controller } from 'react-hook-form';
import Select from 'react-select';

在你的钩子组件中

function Yourcomponent(props){

    const methods = useForm();
    const { handleSubmit } = methods;
    

    const options = [
     { value: '1', label: 'Apple'},
     { value: '2', label: 'Ball'},
     { value: '3', label: 'Cat'},
    ];
    
    const default_value = 1; // you can replace with your default value
    

    // other codes of the component 
    

    function submitHandler(formData){
    
    // values are available in formData

    }


    return(
      <div>
        
        {* other part of your component *}
        <form onSubmit={handleSubmit(submitHandler)} >

           {* other part of your form *}
            <Controller
                control={methods.control}
                defaultValue={default_value}
                name="field_name_product"
                render={({ onChange, value, name, ref }) => (
                    <Select
                        inputRef={ref}
                        classNamePrefix="addl-class"
                        options={options}
                        value={options.find(c => c.value === value)}
                        onChange={val => onChange(val.value)}
                    />
                )}
            />

           {* other part of your form *}
        </form>

        {* other part of your component *}
      </div>
    )
}

【讨论】：

这是一个对我有用的例子。谢谢。

【解决方案4】：

对于多选（适用于 react-hook-form v7）：

import Select from "react-select";
import { useForm, Controller } from "react-hook-form";

const {
  control
} = useForm();

<Controller
  control={control}
  defaultValue={options.map(c => c.value)}
  name="options"
  render={({ field: { onChange, value, ref }}) => (
    <Select
      inputRef={ref}
      value={options.filter(c => value.includes(c.value))}
      onChange={val => onChange(val.map(c => c.value))}
      options={options}
      isMulti
    />
  )}
/>

【讨论】：

【解决方案5】：

import Select from "react-select";
import { useForm, Controller } from "react-hook-form";
const options = [
     { value: '1', label: 'Apple'},
     { value: '2', label: 'Ball'},
     { value: '3', label: 'Cat'},
    ];
const {control} = useForm();
<Controller
 control={control}
 name="AnyName"
 render={({ field: { onChange, value, name, ref } }) => (
        <Select
        inputRef={ref}
        classNamePrefix="addl-class"
        options={options}
        value={options.find((c) => c.value === value)}
        onChange={(val) => onChange(val.map((c) =>c.value))}
        isMulti
        />
        )}
/>

【讨论】：