将 HTMLFormElement.reset() 与 Downshift 和 react-hook-form 结合使用

Question

我正在使用 DownshiftJS 通过 useCombobox 挂钩创建一个自动完成组件。一切顺利，正在使用 react-hook-form 进行测试。不幸的是，我遇到了一个问题，即 react-hook-form 中可用的重置函数会触发 HTMLFormElement.reset() 方法，但不会触发 Downshift 组件中的任何 state/input 更改。

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

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

我已解决问题 here。

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]);

将 HTMLFormElement.reset() 与 Downshift 和 react-hook-form 结合使用

Using HTMLFormElement.reset() with Downshift and react-hook-form

javascript

reactjs

downshift

react-hook-form

现场演示