React自定义模态框点击遮罩无法关闭问题求助

核心问题是事件冒泡引发的逻辑冲突：

• 虽然你用createPortal把模态框挂载到了document.body，但在React组件结构中，<Modal>是嵌套在Card组件的.card容器内部的。
• 点击遮罩层时，closeModal会将modalState设为false，但事件会继续冒泡到上层的.card容器，触发openModal把modalState又设回true，所以视觉上模态框看起来没关闭。

方案1：阻止遮罩层点击事件冒泡 #

修改Modal组件的遮罩层点击逻辑，调用closeModal的同时阻止事件向上冒泡：

// Modal.js
export const Modal = ({ closeModal }) => {
  const stopPropagation = (event) => {
    event.stopPropagation();
  };

  return (
    <>
      {createPortal(
        <div className="modal-backdrop" onClick={(e) => {
          e.stopPropagation(); // 阻止事件冒泡到上层容器
          closeModal();
        }}>
          <div className="modal" onClick={stopPropagation}>
            <p className="gbye">Goodbye</p>
          </div>
        </div>,
        document.body
      )}
    </>
  );
};

方案2：将模态框移出触发容器结构 #

调整Card组件的结构，把<Modal>的渲染放在.card容器外面，彻底避免事件冒泡冲突：

// Card.js
export const Card = () => {
  const [modalState, setModalState] = useState(false);

  const openModal = () => setModalState(true);
  const closeModal = () => setModalState(false);

  return (
    <>
      <div className="card" onClick={openModal}>
        <p>Hello</p>
      </div>
      {modalState && <Modal closeModal={closeModal} />}
    </>
  );
};

你的模态框样式中transform属性缺少逗号，会导致定位异常，建议修正：

/* modal.css */
.modal-backdrop {
  position: fixed;
  transform: translate(-50%, -50%); /* 添加逗号 */
  /* 其他样式不变 */
}

.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: white;
  transform: translate(-50%, -50%); /* 修正为-50%，让模态框居中 */
  /* 其他样式不变 */
}

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