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

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

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

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

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

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

Sie müssen vorsichtig sein, da onBlureinige Einschränkungen in IE11 ( Verwendung von relatedTarget (oder gleichwertig) in IE ? , Https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/relatedTarget ) bestehen. .

onFocusOutSoweit ich das beurteilen kann, gibt es jedoch keine Möglichkeit, React zu verwenden . Weitere Informationen finden Sie unter https://github.com/facebook/react/issues/6410 .

— kahlan88
quelle