我正在尝试使用自定义Material-UI Autocomplete组件并将其连接到react-hook-form.
TLDR：需要使用带有 react-hook-form 控制器的 MUI 自动完成而不需要
defaultValue
我的自定义Autocomplete组件采用具有结构的对象，{_id:'', name: ''}它显示名称并_id在选择选项时返回。该Autocomplete工作得很好。
<Autocomplete
options={options}
getOptionLabel={option => option.name}
getOptionSelected={(option, value) => option._id === value._id}
onChange={(event, newValue, reason) => {
handler(name, reason === 'clear' ? null : newValue._id);
}}
renderInput={params => <TextField {...params} {...inputProps} />}
/>
为了使工作与react-hook-form我设置的setValues是处理程序onChange中Autocomplete，然后手动注册该组件在useEffect如下
useEffect(() => {
register({ name: "country1" });
},[]);
这工作正常，但我想没有useEffect钩子，只是直接以某种方式使用寄存器。
接下来我尝试使用Controller组件 fromreact-hook-form来正确注册表单中的字段而不是使用useEffect钩子
<Controller
name="country2"
as={
<Autocomplete
options={options}
getOptionLabel={option => option.name}
getOptionSelected={(option, value) => option._id === value._id}
onChange={(event, newValue, reason) =>
reason === "clear" ? null : newValue._id
}
renderInput={params => (
<TextField {...params} label="Country" />
)}
/>
}
control={control}
/>
我已经onChange将Autocomplete组件中的更改为直接返回值，但它似乎不起作用。
inputRef={register}在 上使用<TextField/>不会为我削减它，因为我想保存_id而不是name
HERE是包含两种情况的工作沙箱。第一个 withuseEffect和setValueinAutocomplete是有效的。第二次我尝试使用Controller组件
任何帮助表示赞赏。
乐
在 Bill 对 MUI Autocomplete 的工作沙箱发表评论后，我设法得到了一个功能结果
<Controller
name="country"
as={
<Autocomplete
options={options}
getOptionLabel={option => option.name}
getOptionSelected={(option, value) => option._id === value._id}
renderInput={params => <TextField {...params} label="Country" />}
/>
}
onChange={([, { _id }]) => _id}
control={control}
/>
唯一的问题是我MUI Error在控制台中得到一个
Material-UI：一个组件正在改变要控制的 Autocomplete 的不受控制的值状态。
我试图defaultValue为它设置一个，但它的行为仍然如此。此外，由于不需要表单中的这些字段，因此我不想从选项数组中设置默认值。
更新的沙箱在这里
任何帮助仍然非常感谢