Як правильно вловити подію change / focusOut при введенні тексту в React.js?


83

У мене є форма, в якій я хочу , щоб ручка зміни події на час написання тексту, а React OnChange запуску по ключовим вниз ( в відміну від нативного JS, що спускові змін події , коли поле введення з фокуса ).

Чи є спосіб React зробити те, що я хочу?

Відповіді:


157

Якщо ви хочете активувати перевірку лише тоді, коли введення втрачає фокус, ви можете використовувати onBlur

Дрібниці: React <17 прослуховує blurподію і> = 17 прослуховує focusoutподію.


2
Дуже дякую. Це те, що мені потрібно. Я просто не зміг знайти щось про "focusOut" у React
Алекс Сусляков

тоді ми не можемо використовувати значення всередині введення, заповненого реакцією
Thilina Sampath

Не знаю, що ви маєте на увазі @ThilinaSampath
Домінік

1
Незрозуміло, що ви говорите, ви б не призначали значення стану за допомогою події onBlur у випадку керованого вводу, ви б використовували для цього onChange, інакше нічого не зміниться під час введення. Це для запуску перевірки, не присвоюючи значення вводу: /
Домінік

1
Так, ви б використовували onChange для оновлення значення в магазині, це питання стосується перевірки. Ніщо не заважає вам використовувати обидві події.
Домінік

6

Це пізно, але це не варте Вашого часу, але є деякі відмінності у впровадженні подій focusin та focusout на рівні браузера та реагують синтетично на Focus та onBlur. focusin та focusout фактично спливаючі, тоді як onFocus та onBlur не. Отже, немає точно такої ж реалізації для фокусину та фокусування, як зараз для реакції. У будь-якому випадку більшість випадків будуть охоплені onFocus та onBlur.


4

Ви повинні були б бути обережним , оскільки onBlurє певні застереження в IE11 ( Як використовувати relatedTarget (або еквівалент) в IE? , Https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/relatedTarget ) .

Однак, onFocusOutнаскільки я можу зрозуміти, у React немає жодного способу використання . Див. Проблему на їхньому github https://github.com/facebook/react/issues/6410, якщо вам потрібна додаткова інформація.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.