React模态框点击外部逻辑异常：isFormNotEmpty为true仍走else分支

你的问题核心在于闭包陷阱：handleClickOutside函数在组件初始渲染时创建，被依赖为空数组的useEffect绑定到window事件后，就一直持有初始渲染时isFormNotEmpty的引用。后续即使isFormNotEmpty状态更新为true，这个事件处理器里的isFormNotEmpty还是初始的旧值，所以始终走else分支。

下面提供两种可行的修复方式：

方式1：用useCallback包裹事件处理器，更新useEffect依赖 #

通过useCallback缓存handleClickOutside，并将isFormNotEmpty、hideModal、modalRef加入依赖，确保每次这些值变化时，事件处理器能拿到最新状态，同时useEffect会重新绑定事件：

import { useCallback } from 'react';

// 用useCallback包裹，添加依赖
const handleClickOutside = useCallback((event: MouseEvent) => {
  if (modalRef.current && !modalRef.current.contains(event.target as Node)) {
    if (isFormNotEmpty) {
      console.log("SUCCESS!");
      const shouldClose = window.confirm("Some form fields are not empty. Do you really want to close the modal?");
      if (shouldClose) {
        hideModal();
      }
    } else {
      console.log("LOOSER!");
      hideModal();
    }
  }
}, [isFormNotEmpty, hideModal, modalRef]);

// useEffect依赖改为handleClickOutside
useEffect(() => {
  if (window) {
    window.addEventListener("mousedown", handleClickOutside);
    return () => {
      window.removeEventListener("mousedown", handleClickOutside);
    };
  }
}, [handleClickOutside]);

方式2：用useRef保存最新状态值 #

如果不想频繁解绑/绑定事件，可以用useRef保存isFormNotEmpty的最新值，在状态更新时同步ref，这样事件处理器总能拿到最新值：

import { useRef, useEffect } from 'react';

// 创建ref保存最新的isFormNotEmpty值
const isFormNotEmptyRef = useRef(isFormNotEmpty);

// 同步状态到ref
useEffect(() => {
  isFormNotEmptyRef.current = isFormNotEmpty;
}, [isFormNotEmpty]);

const handleClickOutside: EventListener = (event) => {
  if (modalRef.current && !modalRef.current.contains(event.target as Node)) {
    // 访问ref.current获取最新值
    if (isFormNotEmptyRef.current) {
      console.log("SUCCESS!");
      const shouldClose = window.confirm("Some form fields are not empty. Do you really want to close the modal?");
      if (shouldClose) {
        hideModal();
      }
    } else {
      console.log("LOOSER!");
      hideModal();
    }
  }
};

useEffect(() => {
  if (window) {
    window.addEventListener("mousedown", handleClickOutside);
    return () => {
      window.removeEventListener("mousedown", handleClickOutside);
    };
  }
}, []);

当前点击黑色半透明遮罩层时会触发外部点击逻辑，这符合你的需求；如果需要点击遮罩层也触发表单非空时的确认流程，当前逻辑已经覆盖，无需额外修改。

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