Гид по технологиям

Работа с формами в React: контролируемые input, textarea и checkbox

• 6 min read • Frontend • Обновлено 19 Dec 2025
Формы в React: контролируемые input, textarea и checkbox
Формы в React: контролируемые input, textarea и checkbox

Ноутбук Mac на столе рядом с двумя внешними мониторами.

Работа с формами и их элементами в React иногда сложнее, чем кажется, потому что поведение HTML-элементов форм отличается от поведения остальных DOM-элементов. Здесь вы научитесь управлять текстовыми полями, textarea и checkbox, превратите их в контролируемые компоненты и получите рабочие шаблоны для реальных приложений.

Управление полями ввода в формах

В React обычно управляют полем ввода, создавая state и «привязывая» его к элементу input. При нескольких полях лучше хранить данные формы в одном объекте, а не в отдельных state-переменных.

Важно: в React чаще используют событие onChange для синхронизации значения поля с состоянием. onInput тоже работает, но onChange — более распространён и ожидаем в примерах и библиотеках.

Простой подход с одним полем:

function App() {
  const [firstName, setFirstName] = React.useState('');

  function handleFirstNameChange(event) {
    setFirstName(event.target.value);
  }

  return (
    

      
    

  );
}

Этот подход удобен для одного поля, но при нескольких полях появится дублирование — много useState и много обработчиков.

Единый state-объект для формы

Решение — хранить все значения в одном объекте state и использовать единый обработчик изменений. Названия свойств в объекте должны совпадать с атрибутом name у input-элементов.

Пример с двумя полями:

function App() {
  const [formData, setFormData] = React.useState({
    firstName: '',
    lastName: ''
  });

  function handleChange(event) {
    const { name, value } = event.target;
    setFormData((prevState) => ({
      ...prevState,
      [name]: value
    }));
  }

  return (
    

      

      
    

  );
}

Преимущество: одно место для данных формы и единый обработчик, который масштабируется.

Превращаем элементы в контролируемые компоненты

Определение: контролируемый компонент — это элемент формы, значение которого управляется React через state. React становится единственным источником правды.

Чем это полезно: вы всегда можете валидировать, форматировать или подготавливать данные перед отправкой. При submit вы уже имеете доступ к всем значениям из state.

Пример контролируемых input (уже приведён выше) — value привязан к state и onChange обновляет state.

Важно также знать про неконтролируемые компоненты: если вы используете refs и reading DOM напрямую, то React не хранит значение поля в state. Это способ имеет право на жизнь (меньше ререндеров), но усложняет валидацию и синхронизацию.

Когда выбирать неконтролируемые компоненты: большие формы с тяжёлыми полями (например, файлы), когда нужна максимальная производительность и минимальная логика на клиенте.

Работа с textarea

Textarea — многострочное поле. В HTML значение textarea задаётся как дочерний текст между открывающим и закрывающим тегом. В React рекомендуют использовать контролируемый textarea с атрибутом value.

Неправильно (HTML-подход):

Правильно в React (контролируемый):

function App() {
  const [formData, setFormData] = React.useState({ message: 'Hello, How are you?' });

  function handleChange(event) {
    const { name, value } = event.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  }

  return (