React Hook Forms - 添加动态字段行

Question

我正在使用 React Hook Form 库。https://react-hook-form.com

如果是像学生姓名和学生年龄这样的简单表格，那么申请就非常简单。

const { register, handleSubmit, formState: { errors } } = useForm();

我只是创建这两个输入字段并注册它们。

               <div className="w-full flex flex-col mt-4">
                  <label>Name</label>
                  <input
                    type="text"
                    placeholder="Enter Name" {...register("name")}
                  />

                </div>
                <div className="w-full flex flex-col mt-4">
                  <label>Age</label>
                  <input
                    type="text"
                    placeholder="Enter Age" {...register("age")}
                  />

                </div>
                <div>
                  <button onClick={handleSubmit(submitData)}>
                    Update
                  </button>
                </div>

SubmitData函数将获取formData可以使用的数据。将handleSubmit注册的字段绑定到formData

const submitData = async formData => {
  console.log(formData)
}

将formData如下所示：

{"name":"test", "age":"27"}

我的要求是通过允许我添加许多学生来使该表单动态化。我应该能够使用名为“添加学生”的按钮重复一组这些字段。每次我添加新学生时，都应该在这两个字段中创建一个新行，我可以在其中添加新学生姓名。最后，输出formData应该看起来像一个学生数组：

[{"name":"test1", "age":27},{"name":"test2", "age":28},{"name":"test3", "age":29} ]

我可以创建 UI 来添加新字段，但我不知道如何将它们绑定到 React hook 表单中的 formData。在文档中，我找不到如何使用反应钩子形式执行此操作。

请帮忙。

Answer 1

我尝试了以下方法：

我创建了一个状态如下：

const [items, setItems] = useState([0,1,2])

当我添加/删除项目时我可以更新它。

现在，对于字段，我将它们包装到地图中，如下所示：

{items.map(i => (
    <div>
        <div className="w-full flex flex-col mt-4">
            <label>Name</label>
            <input
            type="text"
            placeholder="Enter Name" {...register(`items[${i}].name`)}
            />

        </div>
        <div className="w-full flex flex-col mt-4">
            <label>Age</label>
            <input
            type="text"
            placeholder="Enter Age" {...register(`items[${i}].age`)}
            />

        </div>
    </div>
))}

这有效。