當父子組件相互嵌套時,我們點擊子組件時,子組件的點擊事件會觸發,但由於子組件被包含在父組件中,父組件的點擊事件也會觸發。爲了防止事件冒泡,需要在子組件的點擊事件中,寫上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>
);
}
}