将 React Hook Forms 与 React Select 结合使用：无法在表单上触发 onChange

Question

我们正在使用新工具重写我们的前端。其中一部分是 React Hook 形式。每当您进行更改时，我们的旧前端都会更新，因此为了提供类似的用户体验，我们希望对新前端执行相同的操作。因此，每次更新表单时，我们都会触发表单提交。我意识到这不是 React Hook 表单的默认方法。我还不知道这是否意味着这是一个坏主意。

我们已经构建了页面的大部分，到目前为止，使用标准 html 输入和选择时一切都工作正常。我们刚刚尝试使用 React-select 实现多重选择，这给我们带来了表单上的 onChange 永远不会触发的问题。

我在这里做了一个简单的例子： https://codesandbox.io/p/sandbox/react-select-and-react-hook-form-forked-2v75xv

它有两个受控选择。一种使用标准，另一种使用反应选择。对标准 html 进行更改会触发 onChange，如控制台日志中所示。在反应选择中进行更改不会。

我们发现更改实际上是通过 React hook 表单注册的，但 onChange 事件只是没有被触发。我们通过更改react-select然后使用标准html修改另一个字段来看到这一点，这会触发提交，然后我们可以看到数据实际上已更新。总结一下：

1. 默认 html 中所做的更改会触发 onChange
2. react-select 中所做的更改不会触发表单 onChange
3. 默认 html 和react-select 中所做的更改都注册在 formState 中

我的目标是让react-select触发onChange，这样它的工作方式与我们已有的其他字段类似。我认为这可能与事件传播有关，特别是防止这种情况的发生，但我不知道如何验证这一点。

最终我的问题是：我如何才能在react-select中进行更改以触发表单onChange？

Answer 1

至少在您的codesandbox中，您似乎正在运行

react-hook-form

的v6，但您像使用v7一样使用它。控制器上

render

的API在v7中发生了变化，您正在使用它。但是，沙盒中包含的版本是 v6。

在沙盒中更新它可以解决该问题。