onChange

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

Использование

Обработчик onChange обычно используется вместе с управляемыми компонентами, где значение поля контролируется состоянием React:

function InputField() {
  const [value, setValue] = useState('');

  function handleChange(event) {
    setValue(event.target.value);
  }

  return <input value={value} onChange={handleChange} />;
}

Каждый ввод обновляет состояние, и React немедленно отображает новое значение.

Объект события

В обработчик передаётся объект события. Чтобы получить текущее значение поля, используйте event.target.value:

function handleChange(event) {
  console.log('Текущее значение:', event.target.value);
}

Для чекбоксов и радиокнопок значение находится в event.target.checked.

Пример с чекбоксом

function Checkbox() {
  const [checked, setChecked] = useState(false);

  function handleChange(event) {
    setChecked(event.target.checked);
  }

  return <input type="checkbox" checked={checked} onChange={handleChange} />;
}

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

onChange срабатывает при любом изменении, а не только при потере фокуса (в отличие от нативного DOM-события change в некоторых старых браузерах).
В React это событие нормализовано: оно работает одинаково для всех типов полей ввода.
Не используйте onChange без управления значением через value (или checked) — это приведёт к неконтролируемому поведению и предупреждениям в консоли.

Событие onChange — основа для создания интерактивных форм в React и ключевой элемент паттерна управляемых компонентов.