快捷導(dǎo)航

React冒泡和阻止冒泡的應(yīng)用詳解

更新時間：2020年08月18日 10:28:00 作者：Tower吖

這篇文章主要介紹了React冒泡和阻止冒泡的應(yīng)用詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

阻止事件冒泡分三種：

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添加一個點擊事件監(jiān)聽，給Drawer和一級菜單添加阻止冒泡，思路確實如此，后面實現(xiàn)中發(fā)現(xiàn)：
react為提高性能，有自己的一套事件處理機制，相當(dāng)于將事件代理到全局進行處理，也就是說監(jiān)聽函數(shù)并未綁定到Dom上。因此阻止react的事件冒泡e.stopPropagation()，就不發(fā)阻止原生事件的冒泡，表現(xiàn)為點擊Drawer也會收起Drawer；禁用原生事件冒泡e.nativeEvent.stopPropagation()，React的監(jiān)聽函數(shù)就調(diào)用不到，表現(xiàn)為點擊Drawer以外dom，Drawer不會收起。這些都不是我們想要的。

解決方案

正確的姿勢應(yīng)該是判斷event.target對象是否是目標(biāo)對象或包含目標(biāo)對象或被包含目標(biāo)對象，以此來決定是否觸發(fā)事件

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

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

 hideDrawer = e => {
  const { closeDrawer } = this.props;
  // 找到不需要關(guān)閉的dom 一級菜單
  const tabContent = document.querySelectorAll('.ant-menu-submenu-vertical');
  // 找到不需要關(guān)閉的dom   Drawer
  const drawerContent = document.querySelector('#menuDrawer');
  // 判斷當(dāng)前點擊的dom對象有沒有包含在目標(biāo)dom中
  const isHave = Array.from(tabContent).some(item => item.contains(e.target));
  // 不包含則關(guān)閉Drawer 包含就走其他的業(yè)務(wù)邏輯了
  if (tabContent !== null && !(isHave || drawerContent.contains(e.target))) {
   closeDrawer();
  }
 };

到此這篇關(guān)于React冒泡和阻止冒泡的應(yīng)用詳解的文章就介紹到這了,更多相關(guān)React冒泡和阻止冒泡內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: