![](/img/trans.png)
[英]Proper way to use react-hook-form Controller with Material-UI Autocomplete
[英]Use Material UI autocomplete in freeSolo mode with react-hook-form
我正在尝试在自由独奏模式下使用 Material UI 的自动完成功能作为一种组合输入。 用户应该能够通过自动完成来选择 select 建议的选项,或者如果没有可用的选项,则输入值应用作最终表单值。
问题:
案例一:自动完成工作并建议可以选择和提交的选项,但是当输入具有自定义值时,它不会被提交。
https://codesandbox.io/s/autocomplete-free-solo-case-1-i7kin?file=/demo.js
案例二:从自动完成和自定义输入值中选择的选项被提交但自动完成下拉菜单不再显示建议,而是在整个选择输入时保持打开状态
https://codesandbox.io/s/autocomplete-free-solo-case-2-uk9db?file=/demo.js
我可以接受第二种情况,因为我的自动完成列表只有几个选项,但如果有人有一些提示或解决方案,我会非常感激。
您正在使用freeSolo
,但您没有添加autoSelect
选项,因此您的代码的问题是当input
失去焦点时 - 该值仍然是旧值。 这里的原因是您使用的是受控组件,但 controller 是 react-hook-form。
您可以在这里有两个选择:
autoSelect
,因此即使用户失去对输入的关注 - 当前值将是自动完成的值。enter
键以保存他当前拥有的值。 (您可以为此使用clearOnBlur
选项)。这是第一个选项的实现:
<Autocomplete
id="autocomplete"
freeSolo
autoSelect
options={["option1", "option2", "another option"]}
renderInput={params => (
<TextField
{...params}
label="freeSolo"
margin="normal"
variant="outlined"
/>
)}
/>
还有一个工作示例(基于您的代码框): https://codesandbox.io/s/autocomplete-freesolo-with-auto-value-on-blur-e2smn?file=/demo.js
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.