解决React项目页Modal弹窗无法关闭的问题

DevOps 小满

2026-7-11

问题分析与解决方案

问题根源

问题出在事件冒泡上：你的CrowdfundingModal组件被嵌套在带有onClick={() => setCrowdfundingIsOpen(true)}的img-card-container容器内。当你点击Modal的背景或关闭按钮时，触发setCrowdfundingIsOpen(false)后，事件会向上冒泡到父容器img-card-container，触发它的点击事件又将状态重新设为true，所以看起来Modal无法关闭。

解决方案

有两种可行的修复方式：

方式一：阻止事件冒泡

在Modal的点击事件中添加e.stopPropagation()，阻止事件向上传递到父容器：

const CrowdfundingModal = ({ setCrowdfundingIsOpen }) => {
  const handleClose = (e) => {
    e.stopPropagation(); // 阻止事件冒泡
    setCrowdfundingIsOpen(false);
  };

  return (
    <div className={styles.darkBG} onClick={handleClose}>
      <div className={styles.centered}>
        <div className="projects-model-body">
          <i
            className={styles.closeBtn}
            onClick={handleClose}
          >
            <FaTimes style={{ marginBottom: "-3px" }} />
          </i>
          <div> Modal Body goes here</div>
        </div>
      </div>
    </div>
  );
};

方式二：将Modal移出父容器

更合理的做法是把Modal组件从img-card-container中移出，放在组件的根层级（比如和所有卡片容器同级），避免嵌套在触发它的元素内：

// 项目页面代码修改
...
const [crowdfundingIsOpen, setCrowdfundingIsOpen] = useState(false);
...

return (
  <>
    <div className="img-card-container" onClick={() => setCrowdfundingIsOpen(true)}>
      <div className="img-card">
        <div className="overlay"></div>
        <div className="info">
          <h3>Crowd Funding</h3>
          <span>Personal</span>
        </div>
        <img src={projectPreview} alt="" />
      </div>
    </div>
    {/* 将Modal移到父容器外面 */}
    {crowdfundingIsOpen && (
      <CrowdfundingModal setCrowdfundingIsOpen={setCrowdfundingIsOpen} />
    )}
  </>
);