React中防止事件冒泡：e.stopPropagation()

当父子组件相互嵌套时，我们点击子组件时，子组件的点击事件会触发，但由于子组件被包含在父组件中，父组件的点击事件也会触发。为了防止事件冒泡，需要在子组件的点击事件中，写上e.stopPropagation()，就可以防止事件冒泡了?。

代码解释：

export default App{
	handleClick1=(e) => {
		// TODO
	}
	handleClick2=(e) => {
		// TODO
		e.stopPropagation();// 防止事件冒泡。如果不写着一句，则在点击里面的Button时，两个点击事件都会触发。
	}
	render(){
		return (
			<Button onClick={this.handleClick1}>
				11111
				<Button onClick={this.handleClick2}>222</Button>
			</Button>
		);
	}
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
 

文章来源: blog.csdn.net，作者：爱玲姐姐，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/jal517486222/article/details/102609638