2023react怎么取消冒泡

 所属分类:web前端开发

 浏览:179次-  评论: 0次-  更新时间:2022-12-28
描述:更多教程资料进入php教程获得。 react取消冒泡的方法:1、给dom元素绑定一个单击事件,重新渲染组件;2、通过“function change(e){e.na...
更多教程资料进入php教程获得。

react取消冒泡的方法:1、给dom元素绑定一个单击事件,重新渲染组件;2、通过“function change(e){e.nativeEvent.stopImmediatePropagation();}”方式取消冒泡即可。

本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。

react怎么取消冒泡?

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怎么取消冒泡的详细内容,更多请关注zzsucai.com其它相关文章!

 标签: react,
积分说明:注册即送10金币,每日签到可获得更多金币,成为VIP会员可免金币下载! 充值积分充值会员更多说明»

讨论这个素材(0)回答他人问题或分享使用心得奖励金币

〒_〒 居然一个评论都没有……

表情  文明上网,理性发言!