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>
		);
	}
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章