> Как React получает данные из input (React)

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: EPAM

Стек: React

> Пример ответа

В React данные из input получаются через управляемые (controlled) компоненты. Основной подход - привязать значение поля к состоянию (state) и обновлять его через обработчик события onChange.

Пример:

JSX
import React, { useState } from 'react';

function MyForm() {
  const [inputValue, setInputValue] = useState('');

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

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

Здесь value input всегда равно inputValue, а onChange обновляет состояние при каждом вводе пользователя. Таким образом, React становится единственным источником правды для значения поля.

Альтернативно можно использовать неконтролируемые компоненты с ref (например, useRef), но управляемые компоненты предпочтительнее, так как дают полный контроль над данными и упрощают валидацию, маскирование ввода и интеграцию с формами.