React Hook Form：表单提交后如何重置formState.isDirty状态

假设你用的是React Hook Form（绝大多数场景下formState.isDirty都来自这个库），以下是两种实用的解决方法：

方法一：重置表单值同步更新isDirty #

当保存成功后，直接调用reset方法将表单值恢复为初始状态，isDirty会自动被重置为false，同时按钮回到禁用状态：

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

function YourFormComponent() {
  const { register, handleSubmit, formState: { isDirty }, reset } = useForm({
    defaultValues: {
      // 你的表单初始值
      username: "",
      phone: ""
    }
  });

  const handleSave = async (formData) => {
    // 执行保存逻辑：比如调用后端API
    await fetch("/your-save-api", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(formData)
    });

    // 重置表单到初始状态，isDirty自动变为false
    reset();
  };

  return (
    <form onSubmit={handleSubmit(handleSave)}>
      <input {...register("username")} placeholder="用户名" />
      <input {...register("phone")} placeholder="手机号" />
      <button type="submit" disabled={!isDirty}>保存</button>
    </form>
  );
}

方法二：保留当前表单值，仅重置isDirty #

如果保存后不想改变表单现有值，只想把isDirty设为false，可以给reset方法传入当前表单数据和配置项，让它保留值但清除脏状态：

const handleSave = async (formData) => {
  // 保存逻辑...

  // 保留当前表单值，仅将isDirty重置为false
  reset(formData, {
    keepValues: true,
    keepDirty: false
  });
};

注意事项 #

• 不要直接修改formState.isDirty，这是React Hook Form内部维护的状态，强制修改会导致状态不一致。
• 以上方法仅针对React Hook Form场景，如果你用的是其他表单库，需要对应查看该库的官方文档找重置脏状态的API。

内容的提问来源于stack exchange，提问作者Emil Buszyło