React中点击打开按钮后模态框立即关闭的问题求助

问题原因 #

点击「Open Modal」按钮时，点击事件会冒泡到window对象。此时Modal组件刚完成挂载，useEffect里注册的handleOutsideClick已经生效，而按钮元素并不在.modal-content范围内，所以会触发onClose，导致模态框刚打开就被关闭。

解决方案 #

这里提供两种简单有效的修复方式：

方式1：阻止「Open Modal」按钮的事件冒泡 #

直接在按钮的点击事件里阻止事件向上冒泡，让window不会接收到这个点击事件：

// App组件中修改openModal函数
const openModal = (e) => {
  e.stopPropagation(); // 阻止事件冒泡
  setIsModalOpen(true);
};

// 对应按钮的onClick同步修改
<button onClick={openModal}>Open Modal</button>

方式2：在Modal组件中阻止模态框容器的事件冒泡 #

把模态框的事件处理逻辑封装在组件内部，让模态框容器（.modal元素）阻止事件冒泡，这样点击模态框内部或容器区域时，事件不会传到window，只有点击真正的页面空白区域才会触发关闭：

// Modal组件的return部分修改
return (
  <div 
    className="modal"
    onClick={(e) => e.stopPropagation()} // 阻止模态框容器的事件冒泡
  >
    <div className="modal-content">
      <h1>Modal Content</h1>
      <button onClick={onClose}>Close Modal</button>
    </div>
  </div>
);

两种方式都能解决问题，推荐第二种，更符合组件封装的设计原则。

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