首页 > web前端 > 前端问答 > react modal 怎么实现关闭事件

react modal 怎么实现关闭事件

藏色散人
发布: 2022-12-20 11:04:39
原创
2582 人浏览过

react modal实现关闭事件的方法:1、监听浏览器onclick事件的target;2、通过“if (e.target != messageRef.current) {setMessageCode(false);}”语句判断点击事件,如果不是modal框就执行关闭事件即可。

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中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板