reactjs - React Hook Forms - 添加动态字段行

Question

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

如果是像Student Name, Student Age这样简单的形式，申请就很简单了。

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 将注册字段绑定(bind)到 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 来添加新字段，但我不知道如何将它们绑定(bind)到 react hook 表单中的 formData。在文档中，我找不到如何使用 react Hook 形式执行此操作。

请帮忙。

Answer 1

我尝试了以下方法:

我创建了一个状态如下:

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

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

现在，对于字段，我将它们包装成一个 map ，如下所示:

{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>
))}

这有效。