Ich schreibe eine React-Komponente (v0.14.7 +), die eine onBlur Callback (über Requisiten) aufgerufen werden muss, wenn der Cursor die Komponente verlässt (über Tab, Maus Ereignis klicken oder berühren).Wie man onBlur Ereignisse für Composite-Input-Komponenten in reagieren
Die Herausforderung besteht darin, dass diese Komponente zwei Eingabe-Tags hat. Wenn onBlur mit dem ersten passiert, sollte ich den onBlur-Handler nicht aufrufen, wenn das fokussierende Element das zweite Input-Tag ist. Mit anderen Worten, ich sollte onlyBlur nur dann auslösen, wenn der Fokus BOTH der Eingabeelemente ist.
Ich suche nach einer sauberen Lösung für dieses Problem, das browserübergreifend funktioniert und idealerweise nur die React api/synthetischen Ereignisse verwendet. I.e. ohne auf das native Event zu schauen, es sei denn, ich muss es wirklich tun. Wie soll ich das machen?
Beachten Sie, dass das onFocus-Ereignis nach dem onBlur-Ereignis ausgelöst wird, so dass ich dies nicht tun kann, indem ich einfach nur verfolge, welches Feld den Fokus hat. Auch das document.activeElement zum Zeitpunkt des Ereignisses onBlur scheint das Dokumentobjekt und das aktive Element zurückzugeben.
ich versuchte, aber ich weiß nicht das Ereignis mehr Reagieren hat .. (es ist alles durch die Zeit, das Timeout-Feuer genullt). Ich gehe davon aus, dass dies auf Pooling/Recycling-Ereignisse zurückzuführen ist. Ich möchte das Ereignis an den onBlur-Handler übergeben. SO meine Frage ist, wie erstelle ich ein React synthetisches Ereignisobjekt? –
Sie haben Recht mit der Ereignisbehandlung in React. Sie können das Ereignis beibehalten (verhindern, dass es von React wiederverwendet wird). Siehe Hinweis im Abschnitt Ereignisabfrage https://facebook.github.io/react/docs/events.html#event-pooling. Suchen Sie nach 'event.persist()' Siehe aktualisierte Geige, wo ich die Eingabe protokolliere, die das Ereignis 'blur' zuletzt erhalten hat – Andreyco