(相關(guān)資料圖)

本教程操作環(huán)境：Windows10系統(tǒng)、react18版、Dell G3電腦。

react modal 怎么實(shí)現(xiàn)關(guān)閉事件？

react點(diǎn)擊其他地方關(guān)閉Modal框

原理：很簡(jiǎn)單，就是監(jiān)聽瀏覽器onclick事件的target，判斷點(diǎn)擊事件，如果不是modal框就執(zhí)行關(guān)閉事件。

服務(wù)端渲染在useEffect拿不到window對(duì)象

useLayoutEffect(() => {    window.addEventListener("click", (e) => {      if (e.target != messageRef.current) {        setMessageCode(false);      }    });  }, []);```

const messageRef = useRef(null);

```

useLayoutEffect的函數(shù)簽名與useEffect相同，但是它會(huì)在所有的DOM變更之后同步調(diào)用effect?？梢允褂盟鼇碜x取DOM布局并同步觸發(fā)重新渲染。在瀏覽器執(zhí)行繪制之前，useLayoutEffect內(nèi)部的更新計(jì)劃將被同步刷新。

推薦學(xué)習(xí)：《react視頻教程》

以上就是react modal 怎么實(shí)現(xiàn)關(guān)閉事件的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

關(guān)鍵詞： React