web-dev-qa-db-ja.com

React-子から親へのイベントトリガーを防ぐ

このシナリオでは、親要素をクリックすると、さまざまな色の子要素が表示されます。残念ながら、ユーザーがいずれかの色をクリックすると、親の「クリック」イベントもトリガーされます。

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

私が考えている可能な解決策：

  1. [〜＃〜] css [〜＃〜]？
    子がクリックされたときに、pointer-events : noneクラスを親に追加します。ただし、これは、後で親からpointer-eventsクラスを削除する必要があることを意味します。

  2. Refを使用？
    親ref要素のReactを記録し、子をクリックすると、event.targetをrefと比較しますか？グローバルrefが好きではないので、これは好きではありません。

考えとより良い解決策は大歓迎です。問題は、子がクリックされたときに親でイベントトリガーを停止するにはどうすればよいですか？

javascriptcssreactjseventsdom-events
36
Kayote

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>
64
Alexander T.

小道具で関数を呼び出したいが、同時に子から親へのイベントの伝播を停止したかった。

class LabelCancelable extends Component {

  handleChildClick(e) {
    e.stopPropagation()
  }
  closeClicked(e, props) {
    e.stopPropagation();
    props.onCloseClicked()
  }

  render() {
    const {displayLabel} = this.props;
    return (
      <span className={ "label-wrapper d-inline-block pr-2 pl-2 mr-2 mb-2" } onClick={ this.handleChildClick }>
          <button type="button" className="close cursor-pointer ml-2 float-right" aria-label="Close"
              onClick={(e) => this.closeClicked(e, this.props) }>
              <span aria-hidden="true">&times;</span>
          </button>
          <span className="label-text fs-12">
            { displayLabel }
          </span>
      </span>
    );
  }
}

export default LabelCancelable;
0
Mayur Nandane