react-hook-form中的useFieldArray

发表于 2024-12-06 更新于 2025-04-28 本文字数： 1.3k 阅读时长 ≈ 2 分钟

WEB页面交互，表单是常见的元素，针对表单的校验/管理，react-hook-form是个常用的不错的辅助库。比如其中对于数组值的管理用到的useFieldArray，再比如嵌套复杂的组件表单用到的formContext。了解这些用法，可以更好的去使用它。

场景

在表单处理时，有时会需要处理数组表单项，比如用户可以动态添加N行的表单项。那么useFieldArray就可以面向于这种数组处理的。

例子

function FormTest() {
  const {control, register, getValues} = useForm();
  const {fields, append, prepend, remove, swap, move, insert} = useFieldArray({
    control, // control props comes from useForm (optional: if you are using FormProvider)
    name: "test", // unique name for your Field Array
  });

  console.log(fields, 'fields');
  return (
    <form>
      {fields.map((field, index) => (
        <div><input
          key={field.id} // important to include key with field's id
          {...register(`test.${index}.value`)}
        /></div>
      ))}

      <Button onClick={() => {
        append({
          value: 1,
        })
      }}>
        Add
      </Button>
      {
        JSON.stringify(getValues())
      }
    </form>
  );
}