如何解决模态弹出窗口未关闭的问题

Question

在我的项目页面上，我在卡片中显示项目，当您单击卡片时，会弹出一个模式，其中包含有关该项目的详细信息。这与“服务”页面相同。服务页面上一切正常。

在项目页面上，当我单击背景或取消图标时，模式会打开但不会关闭。模态组件接收一个 prop，因此我们可以在模态打开后立即将其关闭。代码看起来像这样。

项目页面

...
const [crowdfundingIsOpen, setCrowdfundingIsOpen] = useState(false);
...

<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>
  {crowdfundingIsOpen && (
    <CrowdfundingModal setCrowdfundingIsOpen={setCrowdfundingIsOpen} />
  )}
</div>;

上面的代码应该在我单击

card-card-container

div 时触发打开模式，然后我们将单个 prop 传递给

CrowdfundingModal

，到目前为止，一切正常。

在下面的众筹模式中，

onClick={() => setCrowdfundingIsOpen(false)}

不起作用。它应该将状态设置回 false，从而关闭模式，但是当我单击背景和关闭图标时，什么也没有发生。控制台中没有错误。当我和

console.log("Clicked")

时，它会返回单击状态。

可能是什么问题？

众筹模态

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

Answer 1

尝试删除 styles.darkBG div 上的 onClick

.

setCrowdfundingIsOpen(false)}

或添加

onClick={(e) => e.stopPropagation()} 到 styles.centered div