react-hook-form中的useFieldArray

在处理表单校验/交互操作时，经常会用到react-hook-form。之前没注意其提供的useFieldArray，最近在CR时看到有这个写法才了解了下。这里mark下其使用。

场景

在表单处理时，有时会需要处理数组表单项，比如用户可以动态添加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>
  );
}

上述可以看到，当点击Button添加时，fields可以自行插入一个新值，同时每个值也一样可以走register/controller进行监听维护。

注意细节

append值必须是个对象，比如 append(1)就不行。也就是fields维护的必须是对象，比如test.${index}.value就无法设置为test.${index}。

写在最后

表单处理需求推荐尝试下该Lib解决。

相关文档

• https://react-hook-form.com/docs/usefieldarray