React冒泡和阻止冒泡的应用详解

262 阅读 0 评论 173 点赞

我是靠谱客的博主爱撒娇眼睛，最近开发中收集的这篇文章主要介绍React冒泡和阻止冒泡的应用详解，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

阻止事件冒泡分三种：

1：阻止合成事件往最外层document上的事件冒泡，用e.nativeEvent.stopImmediatePropagation();

2: 合成事件间的冒泡，使用 e.stopPropagation()；

3：阻止合成事件，往处理document上的其他原生事件冒泡，需要通过e.target来判断，示例代码如下。

import React,{ Component } from 'react';
import ReactDOM,{findDOMNode} from 'react-dom';

class Counter extends Component{
constructor(props){
super(props);

this.state = {
count:0,
    }
  }

handleClick(e){
this.setState({count:++this.state.count});
  }
render(){
return(
<div ref="test">
<p>{this.state.count}</p>
<a ref="update" onClick={(e)=>this.handleClick(e)}>更新</a>
</div>
    )
  }

componentDidMount() {
document.body.addEventListener('click',e=>{
// 通过e.target判断阻止冒泡
      if(e.target&&e.target.matches('a')){
return;
      }
console.log('body');
    })
  }
}

var div1 = document.getElementById('content');

ReactDOM.render(<Counter/>,div1,()=>{});

需求

最近在写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();
  }
 };

到此这篇关于React冒泡和阻止冒泡的应用详解的文章就介绍到这了,更多相关React冒泡和阻止冒泡内容请搜索靠谱客以前的文章或继续浏览下面的相关文章希望大家以后多多支持靠谱客！