溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了react如何取消冒泡的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇react如何取消冒泡文章都會有所收獲，下面我們一起來看看吧。
react取消冒泡的方法：1、給dom元素綁定一個單擊事件，重新渲染組件；2、通過“function change(e){e.nativeEvent.stopImmediatePropagation();}”方式取消冒泡即可。
react 中取消冒泡
最近在做一個 卸載 react組件的小demo碰見了一個小問題 就是冒泡事件的處理
我們在react中卸載組件 可以用重新渲染的方式 卸載
ReactDOM.render(<App />,document.getElementById('root'))
// 給dom 元素綁定一個單擊事件 重新渲染組件 就會把之前的 App組件 卸載了
document.onclick=function(){
ReactDOM.render(<div>Hello React.js</div>,document.getElementById('root'))
}
// 這樣雖然實現了 但是出現了新的問題 因為給document 綁定的單擊事件 導致 冒泡事件發生了
// 然后就開始嘗試各中 取消冒泡的方式 在組件中
e.stopPropagation()
e.cancelBuble=true;
// 上面我知道的倆種方式都不可以 后來去網上搜索了一下 終于找到 藏得很深的取消冒泡的方法
function change(e){
// 注意 在 react的事件對象中 是由react組件 給封裝了一下
e.nativeEvent.stopImmediatePropagation(); // 這個方法就可以做到了 nativeEvent 原生方法
}
關于“react如何取消冒泡”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“react如何取消冒泡”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
