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

Posted 2023-02-19

【中文标题】使用 react-select 和 react-hook-form 返回正确的值

【英文标题】：Returning correct value using react-select and 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"

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

【参考方案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
        />
        )
/>