Ich bin auf der Suche nach einem Beispiel im Umgang mit Sprudeln und Capturing in React.js. Ich habe one with JavaScript gefunden, aber ich habe Probleme, das Äquivalent für React.js zu finden.Beispiel für Bubbling und Capturing in React.js
Wie würde ich ein Beispiel für Bubbling und Capturing in React.js erstellen?
Sprudeln und Capturen werden beide von React auf die gleiche Weise wie in der DOM-Spezifikation beschrieben unterstützt, mit Ausnahme der Vorgehensweise beim Anhängen von Handlern.
Sprudeln ist so einfach wie mit der normalen DOM API; befestigen einfach einen Handler zu einem eventuellen Elternteil eines Elements, und alle Ereignisse auf dieses Element ausgelöst wird Blase auf das übergeordnete, solange es über stopPropagation auf dem Weg nicht gestoppt ist:
<div onClick={this.handleClick}>
<button>Click me, and my parent's `onClick` will fire!</button>
</div>
Capturing genauso einfach ist, obwohl es ist mentioned only briefly in the docs. Einfach Capture auf den Namen Event-Handler-Eigenschaft hinzufügen:
<div onClickCapture={this.handleClickViaCapturing}>
<button onClick={this.handleClick}>
Click me, and my parent's `onClickCapture` will fire *first*!
</button>
</div>
In diesem Fall, wenn handleClickViaCapturing Anrufe stopPropagation auf der Veranstaltung, die onClick Handler der Schaltfläche wird nicht aufgerufen werden.
This JSBin soll zeigen, wie die Erfassung, sprudelnde und stopPropagation Werke in Reaktion: https://jsbin.com/hilome/edit?js,output
Was zu beachten ist, alle Vanille-Javascript-Ereignisse, zum Beispiel aus einer Bibliothek, werden vorher aufgerufen. Egal, ob Sie das Ereignis in der Capture- oder Bubble-Phase registrieren. – Jodo
Was ist, wenn ich das Gegenteil will? Was passiert, wenn ich den 'onClick' für den Elternteil habe und ich diese Funktion aufrufen möchte, selbst wenn ein Kind angeklickt wird? – Dane
@Dane Dies ist ein normales Event-Bubbling, wie im ersten der beiden obigen Beispiele beschrieben (das OnlyClick des Elternteils wird ausgelöst, wenn Sie auf die untergeordnete Schaltfläche klicken). –
Ereignis sprudelnden ein DOM bestimmtes Ereignis Konzept. Der ganze Sinn von React besteht darin, vom DOM wegzukommen. Sie würden dies in React tun, indem Sie Komponentenfunktionen erstellen und sie per Requisiten an die untergeordneten Elemente weiterleiten. – azium
Schauen Sie sich [Ereignisse reagieren] (https://facebook.github.io/react/docs/events.html) und [DOM-Ereignis-Listener reagieren an ] (https://facebook.github.io/react/tips/dom-event-listeners.html) –