Как я могу поймать и сделать что-то, когда пользователь сосредоточился на вводе, и когда он потерял фокус?

Question

У меня есть поля ввода в моем приложении, и я хочу сделать что-то, когда пользователь сфокусировался на вводе (например, нажал на ввод), и сделать что-то, когда пользователь потерял фокус (например, щелкнул другое поле или нажал какую-то кнопку).

Answer 1

Вы можете использовать событие onFocus для фокуса ввода и событие onBlur для фокуса.

<input
   type="text"
   onFocus={() => {
       // logic on input focus
   }}
   onBlur={() => {
       // logic on focusout
   }}
/>

Обновлено 1: (Ответ на ваш комментарий)

Вы допустили ошибку в привязке события. Посмотрите на обновленный код ниже.

<input
  className="add-option__input"
  type="text "
  name="option"
  onBlur={() => console.log("onBlur")} // use arrow function
  onFocus={() => console.log("onFocus")} // use arrow function
/>

Вы можете найти больше инструкций о привязке события. Способы обработки событий в React JS

Надеюсь, это сработает для вас!

Answer 2

Применить onFocus и onBlur в поле ввода. Пример:

<input onFocus = {() => console.log('focus')}  onBlur={() => console.log('blur')}  type='text' value="xyz" />

Answer 3

Вы можете использовать onFocus при фокусировке пользователя на вводе и onBlur при фокусировке пользователя за пределами ввода

<input
   {...props}
   onFocus={() => console.log('focused')}
   onBlur={() => console.log('blur')}
/>