我正在使用react-hook-forms Controller API围绕react-select中的AsyncSelect来加载选项,作为用户从外部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);
};
任何my data都是具有以下形状的对象数组:
{
fullName: "DJ service"
id: "gcid:dj"
name: "DJ service"
publisher: "GMB"
}
任何关于这方面的线索都将不胜感激,谢谢!
7条答案
按热度按时间eivnm1vs1#
按以下方式更新代码
在您的汇入中
在挂钩组件中
b09cbbtk2#
对于多选(与react-hook-form v7一起使用):
wfveoks03#
我是这样做的:
第一个
2j4z5cfb4#
好吧,实际上这些答案中的大多数都不适用于您有一个自定义onChange函数的情况。诀窍(看起来像是一个bug)是首先设置“onChange(瓦尔.value)”内联,然后设置您的状态变量。下面是我的完整代码;
wnrlj8wa5#
s71maibg6#
通过react-hook-form使用自定义寄存器来解决此问题,如下所示:
https://react-hook-form.com/get-started#Registerfields
ff29svar7#
我想发布适合我的内容,我使用了react-select、react-hook-form和**@hookform/error-message**:
我创建了一个函数,如下所示
我的react select如下所示:
我不认为我的className工作正常,你可以忽略这部分。它是为我的具体设置工作,虽然哈哈。注解掉的代码没有工作的方式,我想要的,因为当我控制台记录的数据,我得到了它如下:
因此,我对该特定解决方案进行了注解,并按照您现在看到的方式进行了操作,我得到了我希望用于合同的确切数据,如下所示:
我希望这能帮上忙