使用 react-hook-form 和多个表单组件进行表单验证

Question

我有一个包含多个组件的表单，并尝试按照本教程中的步骤验证我的输入：7 Form Components For React Hook Form I Always Use

我刚刚尝试了第一个，即名称，但不会进行验证。相反，控制台会发出一条消息：表单提交已取消，因为表单未连接反应

这是我的沙箱：Sandbox

表单组件应在提交时管理整体验证 FormProvider, useForm，而在我的测试组件中，我试图管理单个输入验证和错误消息。然而重要的是 Form.js 提交按钮保持 onClick={makeContract}

Answer 1

您需要删除 <input type="submit">

中的 onClick 处理程序

在 react-hook-form 中，您应该只有一个提交处理程序，您在此处已有该处理程序

<form onSubmit={handleSubmit(onSubmit)}

这里的 onSubmit 处理程序只有在表单中的所有字段都有效时才会被调用。

所以如果你想在提交表单的时候调用makeContract，在onSubmit

里面调用

  // only called when all fields valid
  const onSubmit = (data) => {
    console.log(data);
    makeContract();
  };

React form validation with react-hook-form and multiple form components