react modal 怎么实现关闭事件-百家乐凯发k8

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内部的更新计划将被同步刷新。