React Hook Form with Prime React Password Component关注错误

Question

当React Hook Form与Prime React Password Component一起使用时，如果Password组件抛出错误，例如required设置为true为空，那么React Hook Form将抛出错误，并且无法关注Password字段。

这只发生在Password组件是唯一错误的字段时。

参见sandbox - https://codesandbox.io/s/blissful-butterfly-pc6xhk?file=/src/App.js

我还没有测试过其他Prime React组件，如下拉框，复选框等。

我知道我可以通过禁用提交按钮来解决这个问题，直到所有字段都有效，但这不是首选的操作。

我不确定这是否与我的代码实现错误，因此这里的问题，或者它是否在反应-钩子形式或prime-react底层?

Answer 1

Code Sandbox: https://codesandbox.io/s/white-glade-i26wqu?file=/src/App.js

问题是密码有一个inputRef…主ref指向密码的包装器DIV，所以你需要告诉React hook form inputRef在哪里，这样它就可以集中。

<Password
{...field}
inputRef={field.ref}
type="password"
placeholder="password input"
/>