React中点击外部元素关闭Toggle组件的异常问题排查

你的代码存在几个核心问题导致弹窗无法正常关闭：

• useEffect未设置依赖数组，每次组件渲染都会重复执行，多次绑定window的click事件且无清理逻辑，造成内存泄漏。
• 点击按钮时事件会冒泡到window，触发绑定的监听函数，刚设置show=true就被立刻改成false；改用setShow(!show)时，按钮点击和window点击的两次状态切换会抵消，最终show保持为true。
• 未处理事件清理，当show变为false时，window上的click事件监听未被移除。

修复后的代码 #

import React, { useState, useEffect } from "react";

const Button = () => {
  const [show, setShow] = useState(false);

  useEffect(() => {
    const handleWindowClick = () => setShow(false);

    if (show) {
      window.addEventListener("click", handleWindowClick);
    }

    // 清理函数：移除事件监听，避免内存泄漏
    return () => {
      window.removeEventListener("click", handleWindowClick);
    };
  }, [show]); // 仅当show变化时执行副作用

  const handleButtonClick = (e) => {
    // 阻止事件冒泡，避免触发window的点击事件
    e.stopPropagation();
    setShow(!show);
  };

  return (
    <>
      <button onClick={handleButtonClick}>test</button>
      {show && (
        <div onClick={(e) => e.stopPropagation()}>
          show text
        </div>
      )}
    </>
  );
};

export default Button;

关键修复点 #

• 给useEffect添加依赖数组[show]，仅在show状态变化时执行绑定/解绑逻辑，避免重复绑定事件。
• 新增清理函数，在组件卸载或show变为false时移除window的click事件监听，防止内存泄漏。
• 按钮点击事件中调用e.stopPropagation()，阻止事件冒泡到window，避免弹窗刚打开就被关闭。
• 弹窗内部添加stopPropagation，点击弹窗区域不会触发关闭逻辑，优化交互体验。

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