onFocus и onBlur

События onFocus и onBlur позволяют отслеживать, когда элемент получает или теряет фокус. Они особенно полезны для полей ввода, кнопок и других интерактивных элементов.

onFocus

Событие onFocus срабатывает, когда пользователь переходит на элемент — например, кликает по полю ввода или перемещается к нему с помощью клавиши Tab.

function InputWithFocus() {
  function handleFocus() {
    console.log('Поле получило фокус');
  }

  return <input onFocus={handleFocus} />;
}

onBlur

Событие onBlur срабатывает, когда элемент теряет фокус — например, пользователь кликает вне поля или переключается на другой элемент.

function InputWithBlur() {
  function handleBlur() {
    console.log('Поле потеряло фокус');
  }

  return <input onBlur={handleBlur} />;
}

Практическое применение

Эти события часто используются вместе:

  • Для показа подсказок или ошибок при потере фокуса (валидация «на лету»)
  • Для скрытия/показа дополнительного интерфейса (например, календаря при фокусе на дате)
  • Для отслеживания активного поля в сложных формах

Пример: валидация email после того, как пользователь завершил ввод:

function EmailInput() {
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');

  function validate(value) {
    if (!value.includes('@')) {
      setError('Email должен содержать @');
    } else {
      setError('');
    }
  }

  return (
    <>
      <input
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        onBlur={() => validate(email)}
      />
      {error && <span style={{ color: 'red' }}>{error}</span>}
    </>
  );
}

Важные особенности

  • onFocus и onBlur не всплывают так же, как другие события, но React нормализует их поведение.
  • Эти события не срабатывают при программном изменении фокуса (например, через ref.current.focus()), если только не используется нативный DOM-метод напрямую.
  • Использование onBlur для валидации предпочтительнее, чем onChange, если проверка дорогая или должна происходить только после завершения ввода.

События onFocus и onBlur помогают создавать более отзывчивый и удобный интерфейс, реагирующий на этапы взаимодействия пользователя с элементами.