Wie kann man das change / focusOut-Ereignis bei der Texteingabe in React.js korrekt erfassen?

77

Ich habe ein Formular, in dem ich Änderungsereignisse bei Texteingaben behandeln möchte , aber React onChange- Triggerung bei gedrückter Taste (im Gegensatz zu nativem JS, das Änderungsereignisse auslöst , wenn ein Eingabefeld unscharf ist ).

Gibt es eine Reaktionsmöglichkeit, um das zu tun, was ich will?

javascript reactjs Alex Suslyakov
quelle

Antworten:

149

Wenn Sie die Validierung nur auslösen möchten, wenn die Eingabe den Fokus verliert, können Sie onBlur verwenden

Wissenswertes: Reagieren Sie <17 hört auf blurEreignis und> = 17 hört auf focusoutEreignis.

Dominic
quelle
2
Danke vielmals. Das ist was ich brauche. Ich konnte in React
Alex Suslyakov am
dann können wir keinen Wert innerhalb der Eingabe verwenden, die mit reagieren gefüllt ist
Thilina Sampath
Nicht sicher, was du meinst @ThilinaSampath
Dominic
1
Es ist unklar, was Sie sagen. Bei einer kontrollierten Eingabe würden Sie dem Status mit dem Ereignis onBlur keinen Wert zuweisen. Sie würden dafür onChange verwenden, da sich sonst während der Eingabe nichts ändern würde. Dies dient zum Auslösen einer Validierung, bei der der Eingabe kein Wert zugewiesen wird: /
Dominic
1
Ja, Sie würden onChange verwenden, um den Wert im Store zu aktualisieren. Bei dieser Frage geht es um die Validierung. Nichts hindert Sie daran, beide Ereignisse zu verwenden.
Dominic
6

Es ist spät, aber es lohnt sich, darauf hinzuweisen, dass es einen Unterschied in der Implementierung von Focusin- und Focusout-Ereignissen auf Browserebene gibt und synthetische onFocus und onBlur reagieren. focusin und focusout sprudeln tatsächlich, während onFocus und onBlur dies nicht tun. Daher gibt es derzeit keine exakt gleiche Implementierung für Focusin und Focusout für React. Auf jeden Fall werden die meisten Fälle in onFocus und onBlur behandelt.

Jossie
quelle