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

Работа с формами в React

• 6 min read • React формы • Обновлено 07 Jan 2026
Формы в React: управление полями
Формы в React: управление полями

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

Работа с формами и элементами формы в React требует внимания — HTML-элементы форм ведут себя иначе, чем обычные DOM-элементы. В этой статье показаны практические приёмы для управления полями ввода, textarea и чекбоксами, примеры корректного кода, распространённые ошибки и рекомендации по тестированию и доступности.

Основная идея и связанные фразы

Основной запрос: управление формами в React Связанные варианты запросов: контролируемые компоненты React, textarea в React, checkbox в React, обработка форм React, формы React Hook Form, валидация форм в React

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

В React управление полем ввода обычно реализуется через состояние компонента и привязку значения поля к этому состоянию. Это делает React-состояние единственным источником правды: значение поля всегда берётся из state.

Простой пример для одного поля (корректный паттерн с onChange):

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

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

  return (
    

      
    

  );
}

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

Когда один state на поле не подходит

Если у вас много полей, создавать отдельные состояния и обработчики для каждого — громоздко. Решение — хранить объект с данными формы и использовать единый обработчик, который обновляет нужное свойство по name поля.

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

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

  return (
    

      
      
    

  );
}

Ключевое правило: имена свойств в объекте состояния должны совпадать с атрибутами name у input.

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

HTML-форма по умолчанию при отправке выполняет переход на новую страницу. В React чаще требуется предотвратить это и обрабатывать данные в JavaScript (например, валидировать и отправлять через fetch). Контролируемый компонент — это input/textarea/select, значение которого полностью задаётся значением из state через prop value (для checkbox — checked).

Пример с обработкой сабмита:

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

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

  function handleSubmit(event) {
    event.preventDefault();
    // валидировать formData и отправить на сервер
    console.log('Отправляем форму', formData);
  }

  return (
    

      
      
      
    

  );
}

Совет: вынесите логику в кастомный хук useForm для повторного использования.

Работа с textarea

Тег textarea в «чистом» HTML определяет своё содержание как children. В React textarea тоже возможен как контролируемый компонент — у него есть value и onChange, но необходимо использовать сам тег