快捷導(dǎo)航

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

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

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

阻止事件冒泡分三種：

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

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

3：阻止合成事件，往處理document上的其他原生事件冒泡，需要通過(guò)e.target來(lái)判斷，示例代碼如下。

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=>{
// 通過(guò)e.target判斷阻止冒泡
      if(e.target&&e.target.matches('a')){
return;
      }
console.log('body');
    })
  }
}

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

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

需求

最近在寫(xiě)react的項(xiàng)目，需要手寫(xiě)一個(gè)自定義的菜單，和antd的menu不同，需要點(diǎn)擊一級(jí)菜單后彈出類似一個(gè)Drawer展示二級(jí)和三級(jí)菜單，且菜單樣式自定義，都在一個(gè)Drawer里展示。

難點(diǎn)

其中難點(diǎn)在于點(diǎn)擊一級(jí)菜單時(shí)彈出Drawer，點(diǎn)擊除Drawer和一級(jí)菜單項(xiàng)之外的dom，Drawer收起。

問(wèn)題

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

解決方案

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

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

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

 hideDrawer = e => {
  const { closeDrawer } = this.props;
  // 找到不需要關(guān)閉的dom 一級(jí)菜單
  const tabContent = document.querySelectorAll('.ant-menu-submenu-vertical');
  // 找到不需要關(guān)閉的dom   Drawer
  const drawerContent = document.querySelector('#menuDrawer');
  // 判斷當(dāng)前點(diǎn)擊的dom對(duì)象有沒(méi)有包含在目標(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: