Как получить значение из события ввода через event.target.value?

Как работает event.target.value

Когда пользователь взаимодействует с элементом формы (например, вводит текст в <input>), браузер генерирует событие. Объект события содержит информацию о произошедшем действии. Свойство target ссылается на DOM-элемент, который инициировал событие. У этого элемента есть свойство value, которое хранит текущее содержимое поля ввода.

Пример использования в нативном JavaScript

document.getElementById('myInput').addEventListener('input', function(event) {
  const inputValue = event.target.value;
  console.log('Текущее значение:', inputValue);
});

В этом примере при каждом вводе символа в поле с id 'myInput' вызывается функция, которая получает значение поля через event.target.value и выводит его в консоль.

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

В React обработка событий похожа, но используется синтаксис JSX. Обычно значение сохраняется в состояние компонента:

function MyComponent() {
  const [text, setText] = useState('');

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

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

Здесь event.target.value получает новое значение поля, которое затем обновляет состояние компонента через setText. Это позволяет React контролировать значение поля и реагировать на изменения.

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

• Формы обратной связи, регистрации, входа
• Поисковые строки с автодополнением
• Редакторы текста и поля ввода данных

Вывод: event.target.value — это основной способ получения данных из полей ввода в веб-разработке. Он используется как в нативном JavaScript, так и в современных фреймворках (React, Vue, Angular) для обработки пользовательского ввода и управления состоянием формы.