javascript - 将 HTMLFormElement.reset() 与 Downshift 和 react-hook-form 一起使用

Question

我正在使用 DownshiftJS 使用useCombobox钩子创建一个自动完成组件。一切顺利，并通过react-hook-form. 不幸的是，我遇到了一个问题react-hook-form，其中触发该HTMLFormElement.reset()方法的 reset 函数不会触发 Downshift 组件中的任何状态/输入更改。

这意味着当用户从列表中选择一个项目（这会触发 中的事件Autocomplete），单击重置按钮，然后再次单击输入时，列表将被过滤为仅先前选择的项目。这是因为所选项目存储在selectedItem内部状态中。

如何获取重置方法以触发Autocomplete组件内的更改并清除selectedItem状态？

我已经在这里隔离了这个问题。

标签： javascriptreactjsreact-hook-formdownshift

Answer 1

您可以React.useEffect用来检测用户是否点击了重置按钮并在您的Autocomplete组件中相应地重置所选项目

const [inputItems, setInputItems] = useState(options);
const {
  inputValue,
  ...
} = useCombobox({
  items: inputItems,
  ...
});

React.useEffect(() => {
  if (!inputValue) {
    // user resets value. Reset selected option
    setInputItems(options);
  }
}, [inputValue, options, setInputItems]);

现场演示