Hier ist eine grundlegende Komponente. Sowohl die <ul>als auch <li>die onClick-Funktionen. Ich möchte nur das onClick on the auslösen <li>, nicht das <ul>. Wie kann ich das erreichen?

Ich habe mit e.preventDefault (), e.stopPropagation () herumgespielt, ohne Erfolg.

class List extends React.Component {
  constructor(props) {
    super(props);
  }

  handleClick() {
    // do something
  }

  render() {

    return (
      <ul 
        onClick={(e) => {
          console.log('parent');
          this.handleClick();
        }}
      >
        <li 
          onClick={(e) => {
            console.log('child');
            // prevent default? prevent propagation?
            this.handleClick();
          }}
        >
        </li>       
      </ul>
    )
  }
}

// => parent
// => child

Ich hatte das gleiche Problem. Ich fand stopPropagation tat Arbeit. Ich würde das Listenelement in eine separate Komponente aufteilen, wie folgt:

class List extends React.Component {
  handleClick = e => {
    // do something
  }

  render() {
    return (
      <ul onClick={this.handleClick}>
        <ListItem onClick={this.handleClick}>Item</ListItem> 
      </ul>
    )
  }
}

class ListItem extends React.Component {
  handleClick = e => {
    e.stopPropagation();  //  <------ Here is the magic
    this.props.onClick();
  }

  render() {
    return (
      <li onClick={this.handleClick}>
        {this.props.children}
      </li>       
    )
  }
}

React verwendet die Ereignisdelegierung mit einem einzelnen Ereignis-Listener im Dokument für Ereignisse, die sprudeln, wie z. B. "Klicken" in diesem Beispiel. Dies bedeutet, dass das Stoppen der Weitergabe nicht möglich ist. Das reale Ereignis hat sich bereits verbreitet, wenn Sie in React mit ihm interagieren. stopPropagation on Reacts synthetisches Ereignis ist möglich, da React die Weitergabe synthetischer Ereignisse intern handhabt.

stopPropagation: function(e){
    e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation();
}

In der Reihenfolge der DOM-Ereignisse: CAPTURING vs BUBBLING

Es gibt zwei Stufen für die Ausbreitung von Ereignissen. Diese werden als "Erfassen" und "Sprudeln" bezeichnet .

               | |                                   / \
---------------| |-----------------   ---------------| |-----------------
| element1     | |                |   | element1     | |                |
|   -----------| |-----------     |   |   -----------| |-----------     |
|   |element2  \ /          |     |   |   |element2  | |          |     |
|   -------------------------     |   |   -------------------------     |
|        Event CAPTURING          |   |        Event BUBBLING           |
-----------------------------------   -----------------------------------

Die Erfassungsphase findet zuerst statt, gefolgt von der Sprudelphase. Wenn Sie ein Ereignis mit der regulären DOM-API registrieren, sind die Ereignisse standardmäßig Teil der Bubbling-Phase. Dies kann jedoch bei der Ereigniserstellung angegeben werden

// CAPTURING event
button.addEventListener('click', handleClick, true)

// BUBBLING events
button.addEventListener('click', handleClick, false)
button.addEventListener('click', handleClick)

In React werden standardmäßig auch sprudelnde Ereignisse verwendet.

// handleClick is a BUBBLING (synthetic) event
<button onClick={handleClick}></button>

// handleClick is a CAPTURING (synthetic) event
<button onClickCapture={handleClick}></button>

Werfen wir einen Blick in unseren handleClick-Rückruf (React):

function handleClick(e) {
  // This will prevent any synthetic events from firing after this one
  e.stopPropagation()
}

function handleClick(e) {
  // This will set e.defaultPrevented to true
  // (for all synthetic events firing after this one)
  e.preventDefault()  
}

Eine Alternative, die ich hier nicht erwähnt habe

Wenn Sie in all Ihren Ereignissen e.preventDefault () aufrufen, können Sie überprüfen, ob ein Ereignis bereits behandelt wurde, und verhindern, dass es erneut behandelt wird:

handleEvent(e) {
  if (e.defaultPrevented) return  // Exits here if event has been handled
  e.preventDefault()

  // Perform whatever you need to here.
}

Informationen zum Unterschied zwischen synthetischen Ereignissen und nativen Ereignissen finden Sie in der React-Dokumentation: https://reactjs.org/docs/events.html

Dies ist nicht zu 100% ideal, aber wenn es entweder zu schmerzhaft ist, es propsbei Kindern weiterzugeben -> Kindermode oder ein Context.Provider/ Context.Consumer nur für diesen Zweck zu erstellen ), und Sie es mit einer anderen Bibliothek zu tun haben, die über einen eigenen Handler verfügt, den sie ausführt vor Ihnen können Sie auch versuchen:

   function myHandler(e) { 
        e.persist(); 
        e.nativeEvent.stopImmediatePropagation();
        e.stopPropagation(); 
   }

Soweit ich weiß, event.persistverhindert die Methode, dass ein Objekt sofort in den SyntheticEventPool von React zurückgeworfen wird . Aus diesem Grund existiert die eventübergebene Reaktion tatsächlich nicht, wenn Sie danach greifen! Dies geschieht bei Enkelkindern aufgrund der Art und Weise, wie React die Dinge intern behandelt, indem zuerst die Eltern auf SyntheticEventHandler überprüft werden (insbesondere, wenn die Eltern einen Rückruf hatten).

Solange Sie nicht persistauf etwas zurückgreifen, das einen signifikanten Speicher schafft, um weiterhin Ereignisse zu erstellen, wie onMouseMove(und Sie erstellen keine Art von Cookie-Clicker-Spiel wie Omas Cookies), sollte es vollkommen in Ordnung sein!

Beachten Sie auch: Wenn wir gelegentlich in ihrem GitHub herumlesen, sollten wir nach zukünftigen Versionen von React Ausschau halten, da sie möglicherweise einen Teil der Probleme damit lösen, da sie anscheinend darauf abzielen, faltbaren React-Code in einem Compiler / Transpiler zu erstellen.

Ich hatte Probleme, mich an die event.stopPropagation()Arbeit zu machen. Wenn Sie dies auch tun, versuchen Sie, es an den Anfang Ihrer Click-Handler-Funktion zu verschieben. Dies war das, was ich tun musste, um das Sprudeln des Ereignisses zu verhindern. Beispielfunktion:

  toggleFilter(e) {
    e.stopPropagation(); // If moved to the end of the function, will not work
    let target = e.target;
    let i = 10; // Sanity breaker

    while(true) {
      if (--i === 0) { return; }
      if (target.classList.contains("filter")) {
        target.classList.toggle("active");
        break;
      }
      target = target.parentNode;
    }
  }

Sie können das Sprudeln von Ereignissen vermeiden, indem Sie das Ziel des Ereignisses überprüfen.
Wenn Sie beispielsweise Eingaben in das div-Element verschachtelt haben, in dem Sie einen Handler für das Klickereignis haben, und dies nicht behandeln möchten, können Sie beim Klicken auf die Eingabe einfach an event.targetIhren Handler übergeben und prüfen, ob der Handler basierend auf ausgeführt werden soll Eigenschaften des Ziels.
Zum Beispiel können Sie überprüfen if (target.localName === "input") { return}.
Auf diese Weise können Sie die Ausführung des Handlers "vermeiden"

Die neue Methode ist viel einfacher und spart Ihnen Zeit! Übergeben Sie das Ereignis einfach an den ursprünglichen Klick-Handler und rufen Sie an preventDefault();.

clickHandler(e){
    e.preventDefault();
    //Your functionality here
}