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

Короткий ответ

React получает данные из input через controlled components - управляемые компоненты. Значение input хранится в состоянии компонента (useState или this.state), а onChange обновляет это состояние при каждом вводе. Альтернатива - uncontrolled components через useRef, где данные читаются по необходимости. В React данные текут однонаправленно: состояние → UI, а input - исключение, где UI (ввод пользователя) через обработчик возвращает данные обратно в состояние.

Подробное объяснение

В React данные из input получают через controlled components, что является рекомендуемым подходом. Суть: значение input привязано к состоянию, а onChange синхронизирует состояние с вводом пользователя. Это даёт полный контроль - можно валидировать, форматировать, маскировать ввод в реальном времени.

Механизм работы:

• React хранит "единственный источник правды" (single source of truth) в состоянии
• onChange - это synthetic event, обёртка над нативным событием, с кросс-браузерной совместимостью
• При каждом изменении вызывается setState/reducer dispatch, что триггерит ререндер с новым значением

Для сложных форм используют библиотеки вроде React Hook Form или Formik, которые оптимизируют ререндеры и добавляют валидацию.

Uncontrolled components (useRef) подходят для простых случаев - например, фокус при монтировании или интеграция с non-React кодом. Но они не дают реактивного контроля над значением.

На практике

В production-коде controlled components - стандарт. Для одного input используй useState с onChange. Для форм - React Hook Form, который под капотом использует uncontrolled подход с ref, но предоставляет controlled API через Controller для кастомных компонентов.

Ключевые моменты:

• Всегда обрабатывай event.target.value, а не event.target (это весь элемент)
• Для checkbox/radio используй event.target.checked
• Для числовых input преобразуй value в Number, иначе будет строка
• Debounce onChange для поисковых полей, чтобы не дёргать API на каждое нажатие

Пример кода

JSX
// Controlled component - стандартный подход
import { useState } from 'react';

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

  const handleChange = (e) => {
    const newValue = e.target.value;
    // Валидация: только буквы
    if (/^[a-zA-Z]*$/.test(newValue)) {
      setValue(newValue);
    }
  };

  return (
    <input
      type="text"
      value={value}
      onChange={handleChange}
      placeholder="Введите текст"
    />
  );
}

// Uncontrolled component - для редких случаев
import { useRef } from 'react';

function UncontrolledInput() {
  const inputRef = useRef(null);

  const handleSubmit = () => {
    console.log(inputRef.current.value);
  };

  return (
    <>
      <input type="text" ref={inputRef} defaultValue="initial" />
      <button onClick={handleSubmit}>Получить значение</button>
    </>
  );
}

Как отвечать на собеседовании

Начни с controlled components как основного подхода. Объясни, почему это важно: предсказуемость, возможность валидации, единый источник истины. Упомяни альтернативу - uncontrolled через useRef - и когда её применяют (интеграция с jQuery, простые поля без валидации).

Покажи понимание event pooling в React 16 (событие обнуляется после callback) - это вопрос для senior. В React 17+ pooling убрали, но знание legacy-поведения плюс.

Для senior ожидай вопрос про производительность: как избежать лишних ререндеров при onChange. Ответ: useCallback для обработчика, выделение отдельного компонента для input, debounce/throttle.

Что проверяет интервьюер

• Понимание однонаправленного потока данных в React
• Умение выбирать между controlled и uncontrolled подходами
• Знание работы synthetic events и event pooling
• Понимание проблем производительности при частых onChange
• Способность объяснить trade-off между контролем и простотой

Типичные ошибки

• Использование defaultValue с onChange - это ломает controlled component, React выдаёт warning
• Чтение value напрямую из DOM через ref при controlled подходе - нарушает single source of truth
• Забывают про event.target.checked для checkbox/radio
• Не преобразуют числовые значения - setState('5') вместо setState(5)
• Создают новый callback на каждый render без useCallback - это не критично для одного input, но для списка из 100 полей формата даёт проблемы