今天小编给大家分享一下react modal如何实现关闭事件的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

成都创新互联长期为超过千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为东乌珠穆沁企业提供专业的成都网站设计、成都网站制作，东乌珠穆沁网站改版等技术服务。拥有10年丰富建站经验和众多成功案例,为您定制开发。

react modal实现关闭事件的方法：1、监听浏览器onclick事件的target；2、通过“if (e.target != messageRef.current) {setMessageCode(false);}”语句判断点击事件，如果不是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 modal如何实现关闭事件”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。