Heim >Web-Frontend >Front-End-Fragen und Antworten >So unterdrücken Sie das Sprudeln in der Reaktion

So unterdrücken Sie das Sprudeln in der Reaktion

藏色散人
藏色散人Original
2022-12-27 13:54:322530Durchsuche

So brechen Sie das Bubbling in React ab: 1. Binden Sie ein Click-Ereignis an das Dom-Element und rendern Sie die Komponente erneut. 2. Brechen Sie das Bubbling über „function change(e){e.nativeEvent.stopImmediatePropagation();}“ ab .

So unterdrücken Sie das Sprudeln in der Reaktion

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 18.0.0, Dell G3-Computer.

Wie kann man das Sprudeln in der Reaktion abbrechen?

Bubbling in React abbrechen

Kürzlich habe ich eine kleine Demo zur Deinstallation von React-Komponenten durchgeführt und bin auf ein kleines Problem gestoßen, nämlich die Verarbeitung von Bubbling-Ereignissen

Wenn wir Komponenten in React deinstallieren, können wir sie durch erneutes Rendern deinstallieren

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 原生方法
}

Empfohlene Studie: „Video-Tutorial reagieren

Das obige ist der detaillierte Inhalt vonSo unterdrücken Sie das Sprudeln in der Reaktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn