React Hook Forms 如何动态添加 rows

回答：

在使用React Hook Forms时，动态添加表单行（rows）通常涉及到处理数组类型的表单字段。在这种情况下，我们通常会使用useFieldArray Hook，它专门用于处理数组字段，如动态添加、删除和更新数组中的项。

步骤 1: 引入必要的 Hooks

首先，我们需要从react-hook-form引入useForm和useFieldArray。

javascript
import { useForm, useFieldArray } from 'react-hook-form';

步骤 2: 设置表单

接着，我们使用useForm来初始化表单。

javascript
const { control, handleSubmit, register } = useForm({
  defaultValues: {
    rows: []
  }
});

这里，defaultValues被设置为包含一个空数组的rows，这是我们将要动态添加数据的地方。

步骤 3: 使用 useFieldArray

我们使用useFieldArray来管理rows数组。

javascript
const { fields, append, remove } = useFieldArray({
  control,
  name: "rows"  // 与你的表单默认值中的字段相匹配
});

步骤 4: 添加操作

为了动态添加行，我们可以创建一个函数，该函数在被调用时，使用append方法向rows中添加新的数据对象。

javascript
const addRow = () => {
  append({ name: "", age: "" });
};

步骤 5: 渲染表单和行

在React组件的返回部分，我们可以遍历fields来渲染每一行，并为每一行提供删除按钮。

javascript
<form onSubmit={handleSubmit(onSubmit)}>
  {fields.map((field, index) => (
    <div key={field.id}>
      <input {...register(`rows.${index}.name`)} placeholder="Name" />
      <input {...register(`rows.${index}.age`)} placeholder="Age" />
      <button type="button" onClick={() => remove(index)}>Delete</button>
    </div>
  ))}
  <button type="button" onClick={addRow}>Add Row</button>
  <input type="submit" />
</form>

举例说明

假设我们正在创建一个可以让用户输入多个成员信息的表单，用户可以通过点击"Add Row"按钮来添加更多成员的输入框，每行都有删除按钮以便于删除不需要的行。上述代码正是为这种情况提供了支持。

结论

通过使用useFieldArray，React Hook Form提供了一个非常方便的方式来处理表单中的数组字段，使得动态添加和删除表单行变得既简单又高效。