首頁  >  文章  >  web前端  >  react怎麼取消冒泡

react怎麼取消冒泡

藏色散人
藏色散人原創
2022-12-27 13:54:322497瀏覽

react取消冒泡的方法:1、給dom元素綁定一個點擊事件,重新渲染元件;2、透過「function  change(e){e.nativeEvent.stopImmediatePropagation();}」方式取消冒泡即可。

react怎麼取消冒泡

本教學操作環境:Windows10系統、react18.0.0版、Dell G3電腦。

react怎麼取消冒泡?

react 中取消冒泡

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

我們在react中卸載元件可以用重新渲染的方式卸載

ReactDOM.render(<App />,document.getElementById(&#39;root&#39;))
//  给dom 元素绑定一个单击事件  重新渲染组件 就会把之前的 App组件 卸载了
document.onclick=function(){
    ReactDOM.render(<div>Hello React.js</div>,document.getElementById(&#39;root&#39;))
}
// 这样虽然实现了 但是出现了新的问题 因为给document 绑定的单击事件 导致 冒泡事件发生了
// 然后就开始尝试各中 取消冒泡的方式 在组件中
e.stopPropagation()
e.cancelBuble=true;
// 上面我知道的俩种方式都不可以 后来去网上搜索了一下 终于找到 藏得很深的取消冒泡的方法
 function  change(e){
     //  注意 在 react的事件对象中 是由react组件 给封装了一下
    e.nativeEvent.stopImmediatePropagation();  // 这个方法就可以做到了 nativeEvent 原生方法
}

推薦學習:《react影片教學

以上是react怎麼取消冒泡的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn