[解決済み] React - 子から親へのイベントトリガーを防止する
2023-05-08 18:53:42
質問
親要素がクリックされると、反転して異なる色の子要素が表示される、というシナリオがあります。残念ながら、ユーザーが色の1つをクリックすると、親の「クリック」イベントもトリガーされます。
子供がクリックされたときに親のイベントトリガーを停止するにはどうすればよいでしょうか。
私が疑問に思っている可能性のある解決策。
-
CSS ?
追加pointer-events : none
クラスを親に追加します。しかし、この場合、親をクリーンアップするためにpointer-events
クラスを削除する必要があります。 -
参考文献の使用 ?
を記録するref
の親React
要素 & と比較します。event.target
を参照と比較するのですか?私はこれが好きではありません、なぜならグローバルなref
.
感想とより良い解決策は大いに歓迎されるでしょう。質問です。 子供がクリックされたときに親のイベントトリガーを停止するにはどうすればよいですか?
どのように解決するのですか?
あなたは
stopPropagation
stopPropagation
- バブリングフェーズで現在のイベントがさらに伝播するのを防ぐ バブリングフェーズ
var App = React.createClass({
handleParentClick: function (e) {
console.log('parent');
},
handleChildClick: function (e) {
e.stopPropagation();
console.log('child');
},
render: function() {
return <div>
<p onClick={this.handleParentClick}>
<span onClick={this.handleChildClick}>Click</span>
</p>
</div>;
}
});
ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
関連
-
[解決済み] 親メソッドから子メソッドを呼び出す
-
[解決済み] JavaScriptでイベントを発生させるには?
-
[解決済み】擬似要素のクリックイベントのみ検出する。
-
[解決済み】absoluteの親divの子要素をホバーしたときのonmouseoutをjQueryなしで防止する。
-
[解決済み] node.jsで文字列のsha1ハッシュを取得するにはどうすればよいですか?
-
[解決済み] Javascript / jQueryでAndroid端末を検出する。
-
[解決済み] コールバック地獄とは何か、RXはそれをどのように、そしてなぜ解決するのか?
-
[解決済み] CORS: 認証モードは 'include' です。
-
[解決済み] Chromeのwebkitインスペクタで「Unsafe JavaScript attempt to access frame with URL...」というエラーが継続的に発生する。
-
[解決済み] JavaScript で `throw` の後に `return` をする必要がありますか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] URL/アドレスバーからJavascriptの関数を呼び出す
-
[解決済み] React js 親コンポーネントから子コンポーネントの状態を変更する
-
[解決済み] Javascript 空の配列の削減
-
[解決済み] JavaScript のオブジェクトの配列を比較し、最小値/最大値を取得する
-
[解決済み] AJAX Mailchimp サインアップフォームの統合
-
[解決済み] モデルフェッチ時に1をtrueに、0をfalseに変換する方法
-
[解決済み] イテレータでmap()を使用する
-
[解決済み] Prototypeを使ってtextareaを自動サイズ調整するには?
-
[解決済み] jQueryを使用して、すべてのクリックイベントハンドラを削除するにはどうすればよいですか?
-
[解決済み] <ng-content>が空かどうかを確認する方法は?(これまでのAngular 2+で)