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
reactjs
onclick
event-propagation
dmwong2268
quelle
quelle
Antworten:
Ich hatte das gleiche Problem. Ich fand stopPropagation tat Arbeit. Ich würde das Listenelement in eine separate Komponente aufteilen, wie folgt:
quelle
this.props.handleClick()
inListItem
Komponente seinthis.props.click
?<Link>
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.
quelle
document.addEventListener('click')
Kombination mitonClick
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 .
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
In React werden standardmäßig auch sprudelnde Ereignisse verwendet.
Werfen wir einen Blick in unseren handleClick-Rückruf (React):
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:
Informationen zum Unterschied zwischen synthetischen Ereignissen und nativen Ereignissen finden Sie in der React-Dokumentation: https://reactjs.org/docs/events.html
quelle
Dies ist nicht zu 100% ideal, aber wenn es entweder zu schmerzhaft ist, es
props
bei Kindern weiterzugeben -> Kindermode oder einContext.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:Soweit ich weiß,
event.persist
verhindert die Methode, dass ein Objekt sofort in denSyntheticEvent
Pool von React zurückgeworfen wird . Aus diesem Grund existiert dieevent
ü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 aufSyntheticEvent
Handler überprüft werden (insbesondere, wenn die Eltern einen Rückruf hatten).Solange Sie nicht
persist
auf etwas zurückgreifen, das einen signifikanten Speicher schafft, um weiterhin Ereignisse zu erstellen, wieonMouseMove
(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.
quelle
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:quelle
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.target
Ihren 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"
quelle
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();
.quelle