如何防止模態 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