1. ホーム
  2. javascript

[解決済み] React - 子から親へのイベントトリガーを防止する

2023-05-08 18:53:42

質問

親要素がクリックされると、反転して異なる色の子要素が表示される、というシナリオがあります。残念ながら、ユーザーが色の1つをクリックすると、親の「クリック」イベントもトリガーされます。

子供がクリックされたときに親のイベントトリガーを停止するにはどうすればよいでしょうか。

私が疑問に思っている可能性のある解決策。

  1. CSS ?

    追加 pointer-events : none クラスを親に追加します。しかし、この場合、親をクリーンアップするために pointer-events クラスを削除する必要があります。

  2. 参考文献の使用 ?

    を記録する 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>