Question

我正在尝试在自由独奏模式下使用Material UI的自动完成功能作为一种组合输入。用户应该可以通过自动完成功能选择建议的选项，或者如果没有可用的选项，则应将输入值用作最终表单值。

问题：

第一种情况：自动完成功能会建议可以选择并提交的选项，但是当输入具有自定义值时，不会提交。

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

我可以忍受第二种情况，因为我的自动完成列表只有几个选项，但是如果有人有任何提示或解决方案，我将不胜感激。

Answer 1

您正在使用freeSolo，但是没有添加autoSelect选项，因此代码的问题在于，当input失去焦点时-该值仍然是旧的。原因是您使用的是受控组件，但控制器是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

在freeSolo模式下使用带有React-hook-form的Material UI自动完成功能

1 个答案: