react modal实现关闭事件的方法：1、监听浏览器onclick事件的target；2、通过“if (e.target != messageRef.current) {setMessageCode(false);}”语句判断点击事件，如果不是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中文网其他相关文章！
