react如何取消冒泡

這篇文章主要介紹了react如何取消冒泡的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇react如何取消冒泡文章都會(huì)有所收獲，下面我們一起來看看吧。

成都創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比岷縣網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式岷縣網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋岷縣地區(qū)。費(fèi)用合理售后完善，十余年實(shí)體公司更值得信賴。

react取消冒泡的方法：1、給dom元素綁定一個(gè)單擊事件，重新渲染組件；2、通過“function  change(e){e.nativeEvent.stopImmediatePropagation();}”方式取消冒泡即可。

react 中取消冒泡

最近在做一個(gè) 卸載 react組件的小demo碰見了一個(gè)小問題　就是冒泡事件的處理

我們?cè)趓eact中卸載組件 可以用重新渲染的方式 卸載

ReactDOM.render(,document.getElementById('root'))
//  給dom 元素綁定一個(gè)單擊事件  重新渲染組件 就會(huì)把之前的 App組件 卸載了
document.onclick=function(){
    ReactDOM.render(
Hello React.js
,document.getElementById('root'))
}
// 這樣雖然實(shí)現(xiàn)了 但是出現(xiàn)了新的問題 因?yàn)榻odocument 綁定的單擊事件 導(dǎo)致 冒泡事件發(fā)生了
// 然后就開始嘗試各中 取消冒泡的方式 在組件中
e.stopPropagation()
e.cancelBuble=true;
// 上面我知道的倆種方式都不可以　后來去網(wǎng)上搜索了一下　終于找到　藏得很深的取消冒泡的方法
 function  change(e){
     //  注意 在 react的事件對(duì)象中 是由react組件 給封裝了一下
    e.nativeEvent.stopImmediatePropagation();  // 這個(gè)方法就可以做到了 nativeEvent 原生方法
}

關(guān)于“react如何取消冒泡”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“react如何取消冒泡”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁標(biāo)題：react如何取消冒泡
網(wǎng)址分享：http://m.jiaotiyi.com/article/pgijod.html