溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了react如何取消冒泡的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇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'))
}
// 這樣雖然實現(xiàn)了 但是出現(xiàn)了新的問題 因為給document 綁定的單擊事件 導(dǎo)致 冒泡事件發(fā)生了
// 然后就開始嘗試各中 取消冒泡的方式 在組件中
e.stopPropagation()
e.cancelBuble=true;
// 上面我知道的倆種方式都不可以 后來去網(wǎng)上搜索了一下 終于找到 藏得很深的取消冒泡的方法
function change(e){
// 注意 在 react的事件對象中 是由react組件 給封裝了一下
e.nativeEvent.stopImmediatePropagation(); // 這個方法就可以做到了 nativeEvent 原生方法
}
關(guān)于“react如何取消冒泡”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“react如何取消冒泡”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼
