react modal 怎么實現關閉事件

(相關資料圖)

本教程操作環境：Windows10系統、react18版、Dell G3電腦。

react modal 怎么實現關閉事件？

react點擊其他地方關閉Modal框

原理：很簡單，就是監聽瀏覽器onclick事件的target，判斷點擊事件，如果不是modal框就執行關閉事件。

服務端渲染在useEffect拿不到window對象

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

const messageRef = useRef(null);

```

useLayoutEffect的函數簽名與useEffect相同，但是它會在所有的DOM變更之后同步調用effect。可以使用它來讀取DOM布局并同步觸發重新渲染。在瀏覽器執行繪制之前，useLayoutEffect內部的更新計劃將被同步刷新。

推薦學習：《react視頻教程》

以上就是react modal 怎么實現關閉事件的詳細內容，更多請關注php中文網其它相關文章！

關鍵詞： React