React冒泡和阻止冒泡的使用方法-创新互联

这篇文章给大家分享的是有关React冒泡和阻止冒泡的使用方法的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。

创新互联建站成立与2013年，是专业互联网技术服务公司，拥有项目网站建设、成都网站建设网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元浦东做网站,已为上家服务,为浦东各地企业和个人服务,联系电话:18982081108

阻止事件冒泡分三种：

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(

{this.state.count}
this.handleClick(e)}>更新

    )
  }

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(,div1,()=>{});

文章标题：React冒泡和阻止冒泡的使用方法-创新互联
地址分享：http://cdkjz.cn/article/hegpd.html