React冒泡和阻止冒泡的应用详解
阻止事件冒泡分三种：
1：阻止合成事件往最外层document上的事件冒泡，用e.nativeEvent.stopImmediatePropagation();
2:合成事件间的冒泡，使用e.stopPropagation()；
3：阻止合成事件，往处理document上的其他原生事件冒泡，需要通过e.target来判断，示例代码如下。
importReact,{Component}from'react';
importReactDOM,{findDOMNode}from'react-dom';
classCounterextendsComponent{
constructor(props){
super(props);
this.state={
count:0,
}
}
handleClick(e){
this.setState({count:++this.state.count});
}
render(){
return(
{this.state.count}
this.handleClick(e)}>更新
需求
最近在写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一级菜单
consttabContent=document.querySelectorAll('.ant-menu-submenu-vertical');
//找到不需要关闭的domDrawer
constdrawerContent=document.querySelector('#menuDrawer');
//判断当前点击的dom对象有没有包含在目标dom中
constisHave=Array.from(tabContent).some(item=>item.contains(e.target));
//不包含则关闭Drawer包含就走其他的业务逻辑了
if(tabContent!==null&&!(isHave||drawerContent.contains(e.target))){
closeDrawer();
}
};
到此这篇关于React冒泡和阻止冒泡的应用详解的文章就介绍到这了,更多相关React冒泡和阻止冒泡内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。