react钩子表单版本7验证错误不起作用

Question

我在使用新的react hook表单版本7时遇到了验证错误的问题，我想知道是否有人可以提供帮助(请参阅下面链接的示例(。

https://codesandbox.io/s/react-hook-form-adapting-existing-form-forked-n3sis?file=/src/index.js

在我从v6更新到v7之前，这一切都一直有效。我更改了使用register的方式，即{...register('name', {required: 'Add this'})}而不是ref={register({required: 'Add this'})}，并且现在更新了从formState获取错误的方式，也就是const { formState: { errors }} = useForm();而不是const { errors } = useForm();。

我很确定这与我使用受控组件而不仅仅是本地的html<input />有关，但似乎无法完全理解。

任何帮助都将不胜感激。谢谢

Answer 1

您只是忘记了将props和ref传递给输入组件。

const Input = React.forwardRef(
({ error, id, label, required, ...props }, ref) => {
return (
<>
<label htmlFor={id}>{label}</label>
<input id={id} required={required} {...props} ref={ref} />
<span style={{ color: "red" }}>{error}</span>
</>
);
}
);

这是你的代码沙盒工作：https://codesandbox.io/s/react-hook-form-adapting-existing-form-forked-dpxie?file=/src/index.js