如何防止模态 window 在 React 中关闭？

Question

我在 React 中制作了一个模态 window。 我创建了一个名为 modalbool 的 state 并在 modalbool 为真时显示模态 window。 我创建了一个名为 Backdrop 的父组件，并在单击背景时关闭了模态 window。 但是，即使我单击子组件 ModalContainer 组件，也会执行 modalClosefunc 并关闭模态 window。 当仅按下 Backdrop 组件时，如何使 modalbool 变为 false 并关闭模态 window？

这是我的代码

const Backdrop = styled.div`
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top:0;
left: 0;
background-color: rgba(0,0,0,0.7);
width: 100vw;
height: 100vh;
`

const ModalContainer = styled.div`
position: relative;
width: 700px;
height: 600px;
background-color: lightcoral;

`;

const [modalbool, setModalbool] = useState(false);



  {modalbool ? (
    <Backdrop onClick={modalClosefunc}>
    <ModalContainer>

    </ModalContainer>
</Backdrop>
      ) : null

Answer 1

快速而巧妙的解决方法是调整组件的 css 的 z-index。 如果 modalbool 为真，则将模态的 z-index 设置为某个较高的数字，并在您单击开箱后将其重置回基线。

您还可以选择将点击处理程序附加到模态本身，并相应地编写逻辑。 （一个用例可能是此处理程序为模式上的 mouseover 事件附加或删除事件侦听器，并在鼠标退出模式后关闭它）

希望这可以帮助！

Answer 2

给 ModalContainer 添加一个 click 事件用于 stopPropagation