阅读 2146

React冒泡和阻止冒泡的应用

需求

最近在写react的项目,需要手写一个自定义的菜单,和antd的menu不同,需要点击一级菜单后弹出类似一个Drawer展示二级和三级菜单,且菜单样式自定义,都在一个Drawer里展示。

难点

其中难点在于点击一级菜单时弹出Drawer,点击除Drawer和一级菜单项之外的dom,Drawer收起。

问题

乍一想就是给document添加一个点击事件监听,给Drawer和一级菜单添加阻止冒泡,思路确实如此,后面实现中发现: react为提高性能,有自己的一套事件处理机制,相当于将事件代理到全局进行处理,也就是说监听函数并未绑定到Dom上。 因此阻止react的事件冒泡e.stopPropagation(),就不发阻止原生事件的冒泡,表现为点击Drawer也会收起Drawer;禁用原生事件冒泡e.nativeEvent.stopPropagation(),React的监听函数就调用不到,表现为点击Drawer以外dom,Drawer不会收起。这些都不是我们想要的。

解决方案

正确的姿势应该是判断event.target对象是否是目标对象或包含目标对象或被包含目标对象,以此来决定是否触发事件

  componentDidMount() {
    document.addEventListener('click', this.hideDrawer);
  }

  componentWillUnmount() {
    document.removeEventListener('click', this.hideDrawer);
  }

  hideDrawer = e => {
    const { closeDrawer } = this.props;
    // 找到不需要关闭的dom 一级菜单
    const tabContent = document.querySelectorAll('.ant-menu-submenu-vertical');
   // 找到不需要关闭的dom     Drawer
    const drawerContent = document.querySelector('#menuDrawer');
   // 判断当前点击的dom对象有没有包含在目标dom中
    const isHave = Array.from(tabContent).some(item => item.contains(e.target));
   // 不包含则关闭Drawer  包含就走其他的业务逻辑了
    if (tabContent !== null && !(isHave || drawerContent.contains(e.target))) {
      closeDrawer();
    }
  };
复制代码
文章分类
前端
文章标签