wake-up-neo.com

Reagieren - Verhindern Sie, dass der Ereignisauslöser für ein Kind ein Kind ist

Ich habe dieses Szenario, in dem beim Klicken auf das übergeordnete Element ein untergeordnetes Element mit verschiedenen Farben angezeigt wird. Wenn der Benutzer auf eine der Farben klickt, wird leider auch das Ereignis "click" des übergeordneten Elements ausgelöst.

Wie kann ich den Ereignisauslöser für Eltern stoppen, wenn auf das Kind geklickt wird?

Mögliche Lösungen frage ich:

1 -CSS? Hängt die Klasse pointer-events : none an das übergeordnete Element an, wenn auf das Kind geklickt wird. Dies würde jedoch bedeuten, dass das übergeordnete Element später von der pointer-events Klasse gereinigt werden muss.

2 - Verwenden von Ref ? Zeichnen Sie das ref des übergeordneten React - Elements auf. & Klicken Sie auf das Kind, und vergleichen Sie event.target mit dem Ref. Ich mag das nicht, weil ich das globale ref nicht mag. 

Gedanken & die bessere Lösung wäre sehr dankbar. Die Frage ist: Wie kann ich den Ereignisauslöser für Eltern stoppen, wenn auf das Kind geklickt wird?

javascriptcsseventsreactjsjavascript-events
23
Kayote

Sie können stopPropagation verwenden. 

stopPropagation - Verhindert die weitere Verbreitung des aktuellen Ereignisses in die sprudelnde Phase

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>

46
Alexander T.

Ich wollte die Funktion auf Requisiten aufrufen, gleichzeitig aber die Weitergabe von Ereignissen vom Kind zum Elternteil stoppen 

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