React中如何检测模态框内表单是否存在更新？

既然你用的是React Hook Form的FormProvider，直接利用它内置的表单状态是最通用且不依赖字段数量的方案，完全不用逐个字段判断。

核心思路：利用formState.isDirty状态 #

React Hook Form的formState里的isDirty属性会自动跟踪所有字段是否和初始值有差异——只要任意字段值被修改过，它就会变成true，完全满足你的需求。相比touched（仅标记字段是否被点击过），isDirty才是真正检测内容是否修改的准确指标。

具体实现步骤 #

1. 在弹窗组件中通过useFormContext获取表单状态
2. 拦截弹窗的关闭事件，先判断isDirty状态
3. 根据状态决定直接关闭还是显示确认弹窗

示例代码：

import { useFormContext } from 'react-hook-form';
import Modal from './your-modal-component'; // 你的弹窗组件

const FormModal = ({ isOpen, onClose }) => {
  const { formState: { isDirty }, reset } = useFormContext();

  const handleClose = () => {
    if (isDirty) {
      // 显示确认弹窗，可替换为自定义确认组件
      const shouldClose = window.confirm('表单内容已修改，确定要离开吗？');
      if (shouldClose) {
        reset(); // 可选：重置表单状态，避免下次打开时残留修改标记
        onClose();
      }
    } else {
      onClose();
    }
  };

  return (
    <Modal 
      isOpen={isOpen} 
      onClose={handleClose}
      // 确保遮罩点击、ESC关闭等逻辑都走handleClose
      onOverlayClick={handleClose}
      onEscapeKeyDown={handleClose}
    >
      {/* 你的表单字段内容 */}
    </Modal>
  );
};

额外场景处理 #

• 如果需要忽略特定字段的修改检测（比如辅助状态字段），可以在初始化表单时通过useForm的defaultValues明确设置这些字段的初始值，或者使用watch单独监听需要检测的字段组，再对比初始快照，但这种场景下isDirty依然是最省心的通用方案。
• 若你使用的是非React Hook Form的自定义FormProvider，可以在表单初始化时保存一份initialValues快照，关闭弹窗时通过watch()获取当前所有字段值，和快照做深度对比——但React Hook Form的内置状态已经帮你封装了这个逻辑，无需重复实现。

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