React表单如何高效检测未保存更改？多页面场景解决方案

嘿，这个场景我太熟悉了——给每个输入框单独绑onChange不仅麻烦，还容易漏写，尤其是表单字段多的时候。分享几个我实战中用过的高效方案，你可以根据项目情况选：

方案1：利用表单统一onChange + 初始值对比 #

你可以给整个<form>元素绑定onChange事件，不管哪个输入框变化都会触发这个统一处理函数。同时维护表单当前值和初始值，通过对比两者判断是否有未保存的更改。

import { useState, useEffect } from 'react';

function UserForm() {
  // 初始表单值（可从props/接口获取）
  const initialFormValues = { username: '', email: '' };
  const [formValues, setFormValues] = useState(initialFormValues);
  const [isDirty, setIsDirty] = useState(false);

  // 统一处理所有输入变化
  const handleFormChange = (e) => {
    const { name, value, type, checked } = e.target;
    // 兼容复选框、单选框等特殊输入类型
    const inputValue = type === 'checkbox' ? checked : value;
    setFormValues(prev => ({ ...prev, [name]: inputValue }));
  };

  // 实时对比当前值与初始值，更新脏状态
  useEffect(() => {
    setIsDirty(Object.keys(initialFormValues).some(key => 
      formValues[key] !== initialFormValues[key]
    ));
  }, [formValues, initialFormValues]);

  // 监听页面卸载/路由跳转，提示未保存更改
  useEffect(() => {
    const handleBeforeUnload = (e) => {
      if (isDirty) {
        e.preventDefault();
        e.returnValue = ''; // 兼容不同浏览器的提示逻辑
      }
    };

    window.addEventListener('beforeunload', handleBeforeUnload);
    
    // 如果是React Router项目，还可以监听路由变化
    // const unblock = history.block(() => {
    //   if (isDirty) return '你有未保存的更改，确定要离开吗？';
    // });

    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
      // unblock?.();
    };
  }, [isDirty]);

  // 保存后重置脏状态
  const handleSave = () => {
    // 执行保存逻辑（接口请求等）
    setIsDirty(false);
  };

  return (
    <form onChange={handleFormChange}>
      <input name="username" value={formValues.username} placeholder="用户名" />
      <input name="email" type="email" value={formValues.email} placeholder="邮箱" />
      <button onClick={handleSave} disabled={!isDirty}>保存</button>
    </form>
  );
}

注意：每个输入框必须设置name属性，且与formValues的键名对应，这样才能正确更新状态。

方案2：封装自定义Hook复用逻辑 #

如果多个页面都需要这个功能，把逻辑封装成自定义Hook是最优解，避免重复代码，还能统一维护。

import { useState, useEffect, useCallback } from 'react';

function useDirtyForm(initialValues) {
  const [formValues, setFormValues] = useState(initialValues);
  const [isDirty, setIsDirty] = useState(false);

  // 通用输入处理函数
  const handleChange = useCallback((e) => {
    const { name, value, type, checked } = e.target;
    const inputValue = type === 'checkbox' ? checked : value;
    setFormValues(prev => ({ ...prev, [name]: inputValue }));
  }, []);

  // 自动检测脏状态
  useEffect(() => {
    setIsDirty(Object.keys(initialValues).some(key => 
      formValues[key] !== initialValues[key]
    ));
  }, [formValues, initialValues]);

  // 暴露离开守卫设置函数，支持页面卸载和路由跳转拦截
  const setupLeaveGuard = useCallback((history) => {
    const handleBeforeUnload = (e) => {
      if (isDirty) {
        e.preventDefault();
        e.returnValue = '';
      }
    };

    window.addEventListener('beforeunload', handleBeforeUnload);
    
    let unblock;
    if (history) {
      unblock = history.block(() => {
        if (isDirty) return '你有未保存的更改，确定要离开吗？';
      });
    }

    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
      unblock?.();
    };
  }, [isDirty]);

  return { formValues, setFormValues, isDirty, handleChange, setupLeaveGuard };
}

// 组件中使用示例
function ProfilePage() {
  const initialValues = { name: '张三', age: '' };
  const { formValues, handleChange, isDirty, setupLeaveGuard } = useDirtyForm(initialValues);

  useEffect(() => {
    const cleanup = setupLeaveGuard();
    return cleanup;
  }, [setupLeaveGuard]);

  const handleSave = () => {
    // 保存逻辑
  };

  return (
    <form onChange={handleChange}>
      <input name="name" value={formValues.name} />
      <input name="age" type="number" value={formValues.age} />
      <button onClick={handleSave} disabled={!isDirty}>保存</button>
    </form>
  );
}

这个Hook兼容多种输入类型，还能灵活对接路由守卫，复用性拉满。

方案3：使用成熟表单库（推荐复杂场景） #

如果你的项目表单逻辑复杂（比如字段校验、联动等），直接用React Hook Form或Formik这类成熟库会更省心——它们内置了脏值检测功能，不用自己写对比逻辑。

以React Hook Form为例：

import { useForm } from 'react-hook-form';
import { useEffect } from 'react';

function CheckoutForm() {
  const { register, formState: { isDirty }, handleSubmit } = useForm({
    defaultValues: { address: '', phone: '' }
  });

  useEffect(() => {
    const handleBeforeUnload = (e) => {
      if (isDirty) {
        e.preventDefault();
        e.returnValue = '';
      }
    };

    window.addEventListener('beforeunload', handleBeforeUnload);
    return () => window.removeEventListener('beforeunload', handleBeforeUnload);
  }, [isDirty]);

  const onSubmit = (data) => {
    // 提交表单逻辑
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('address')} placeholder="收货地址" />
      <input {...register('phone')} placeholder="手机号" />
      <button type="submit" disabled={!isDirty}>提交订单</button>
    </form>
  );
}

React Hook Form的isDirty状态会自动跟踪表单变化，性能也出色（基于非受控组件思路，减少不必要的重渲染）。

总结一下：简单表单用方案1或自定义Hook；复杂表单直接上表单库，效率最高。

内容的提问来源于stack exchange，提问作者Grant Solomons