如何使 react-hook-form 在一页中使用多个表单？

Posted 2023-02-19

【中文标题】如何使 react-hook-form 在一页中使用多个表单？

【英文标题】：how to make react-hook-form work with multiple forms in one page?

【发布时间】：2020-06-02 05:10:09

【问题描述】：

我在我的项目中使用 react-hook-form 并且我有 2 个完全独立的表单，但是当我提交其中一个表单并且如果需要另一个表单中的某些字段时，我无法提交当前表单，请检查demo，并尝试提交其中一个表单，这些表单应该彼此独立工作，但看起来它们相互依赖。

有什么帮助吗？

【参考方案1】：

欢迎来到 *** @webcoder 您对两种形式都使用相同的钩子实例。您将不得不使用不同的名称重复使用。

import React from "react";
import ReactDOM from "react-dom";
import  useForm  from "react-hook-form";

import "./styles.css";

function App() 
  const 
    register,
    formState:  errors ,
    handleSubmit,
   = useForm(
    mode: "onBlur",
  );

  const 
    register: register2,
    formState:  errors: errors2 ,
    handleSubmit: handleSubmit2,
   = useForm(
    mode: "onBlur",
  );

  const onSubmit = (data) => 
    alert(JSON.stringify(data));
  ;

  const onSubmitEmail = (data) => 
    alert(JSON.stringify(data));
  ;

  return (
    <div className="App">
      <form key=1 onSubmit=handleSubmit(onSubmit)>
        <div>
          <label htmlFor="firstName">First Name</label>
          <input
            name="firstName"
            placeholder="bill"
            ref=register( required: true )
          />
          errors.firstName && <p>This is required</p>
        </div>

        <div>
          <label htmlFor="lastName">Last Name</label>
          <input
            name="lastName"
            placeholder="luo"
            ref=register( required: true )
          />
          errors.lastName && <p>This is required</p>
        </div>
        <input type="submit" />
      </form>

      <form key=2 onSubmit=handleSubmit2(onSubmitEmail)>
        <div>
          <label htmlFor="email" placeholder="[e-mail]">
            Email
          </label>
          <input name="email" ref=register2( required: true ) />
          errors2.email && <p>This is required</p>
        </div>
        <input type="submit" />
      </form>
    </div>
  );


const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

【讨论】：

很棒的回答和亲切的问候。

如果你使用的 react-hook-form 早于 V7。请参阅 Sibiraj 的编辑历史记录。

你注意到了吗？评论的@bill 是 react 使用表单的创建者。

@Eddysapata LOL 我没有，我以为是问这个问题的人。比尔在包装上取得了很好的成功。这确实是一件了不起的工作。

【参考方案2】：

快速更新 Faizaan 的回答：在我的情况下，errors 应该与 formState 一起使用，而不是单独使用。因此，该属性应导入为：

const  formState:  errors   = useForm();
const  formState:  errors: errors2   = useForm();

名称可能令人困惑，但这是我得出的解决方案。

【讨论】：

从第 7 版开始。

是否可以在一个页面上动态创建多个表单？这硬编码2形式？我们可以动态创建并在页面上呈现的 react-hook-forms 列表吗？