使用react-hook-form时如何仅提交已修改的输入字段

react-hook-form 内置了字段修改状态追踪能力，不需要额外引入第三方依赖即可实现需求，核心依赖formState.dirtyFields属性完成。

实现逻辑 #

formState.dirtyFields是一个对象，所有被用户修改过的字段会作为键存在于该对象中，对应值为true，未修改的字段不会出现在该对象内。我们只需要在提交时基于该对象过滤全量表单值，即可得到仅含修改项的提交参数。

完整代码示例 #

import { useForm } from "react-hook-form";

function PartialUpdateForm() {
  const { 
    register, 
    handleSubmit, 
    formState: { dirtyFields } 
  } = useForm({
    // 此处赋值为接口返回的原始字段值
    defaultValues: {
      username: "原有用户名",
      age: 24,
      contact: "13xxxxxxxxx"
    }
  });

  const submitHandler = (allFormValues) => {
    // 筛选仅修改过的字段
    const updatedFields = Object.fromEntries(
      Object.entries(allFormValues).filter(([fieldKey]) => dirtyFields[fieldKey])
    );

    // 此处将updatedFields传给更新接口即可
    console.log("待提交的修改字段：", updatedFields);
  };

  return (
    <form onSubmit={handleSubmit(submitHandler)}>
      <div>
        <label>用户名：</label>
        <input {...register("username")} />
      </div>
      <div>
        <label>年龄：</label>
        <input type="number" {...register("age")} />
      </div>
      <div>
        <label>联系方式：</label>
        <input {...register("contact")} />
      </div>
      <button type="submit">提交更新</button>
    </form>
  );
}

注意事项 #

• 必须正确设置defaultValues，dirtyFields的判断逻辑是对比字段当前值与初始默认值，初始值赋值错误会导致脏字段判断异常
• 上述示例仅适用于扁平结构表单，如果是嵌套结构表单，dirtyFields会返回对应嵌套结构，需要递归遍历过滤嵌套字段
• 如果提交后需要重置脏字段状态，调用reset方法传入新的默认值即可同步清空dirtyFields

内容的提问来源于stack exchange，提问作者Abed abuSalah