ホームページ > ウェブフロントエンド > フロントエンドQ&A > Reactでバブリングをキャンセルする方法

Reactでバブリングをキャンセルする方法

藏色散人
リリース: 2022-12-27 13:54:32
オリジナル
2522 人が閲覧しました

バブリングをキャンセルするための React メソッド: 1. クリック イベントを dom 要素にバインドし、コンポーネントを再レンダリングします; 2. 「関数change(e){e.nativeEvent.stopImmediatePropagation();}」を使用します。方法 バブリングを解除するだけです。

Reactでバブリングをキャンセルする方法

このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。

react でのバブリングをキャンセルするにはどうすればよいですか?

react でのバブリングのキャンセル

最近、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 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート