Как работает событие onChange применительно к полям формы?

Как работает событие onChange в полях формы

Событие onChange в HTML и JavaScript срабатывает, когда пользователь изменяет содержимое элемента формы, такого как <input>, <textarea> или <select>. В отличие от события oninput, которое срабатывает при каждом изменении, onchange обычно срабатывает после потери фокуса, но в React оно ведет себя как oninput и вызывается при каждом изменении значения.

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

В React событие onChange используется для создания контролируемых компонентов, где состояние формы хранится в компоненте и обновляется через обработчик. Это позволяет React контролировать значение поля и реагировать на каждое изменение.

import React, { useState } from 'react';

function MyForm() {
  const [name, setName] = useState('');

  const handleChange = (event) => {
    setName(event.target.value);
  };

  return (
    <input type="text" value={name} onChange={handleChange} />
  );
}

В этом примере при каждом вводе символа вызывается handleChange, который обновляет состояние name. Поле ввода отображает текущее значение из состояния, что делает его контролируемым.

Где применяется

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

Вывод

Используйте onChange в React для создания контролируемых компонентов, когда необходимо отслеживать и управлять состоянием полей формы в реальном времени. Это особенно полезно для валидации, фильтрации и других сценариев, требующих немедленной реакции на ввод пользователя.