Логотип YeaHub

База вопросов

Собеседования

Тренажёр

База ресурсов

Обучение

Навыки

Задачи

Войти

Выбери, каким будет IT завтра — вместе c нами!

YeaHub — это полностью открытый проект, призванный объединить и улучшить IT-сферу. Наш исходный код доступен для просмотра на GitHub. Дизайн проекта также открыт для ознакомления в Figma.

© 2026 YeaHub

AI info

Карта сайта

Документы

Медиа

Назад
Вопрос про React: form, handler, state management

Как унифицировать обработчик изменения для нескольких полей формы?

Вопрос проверяет умение создавать эффективные обработчики для форм с множеством полей в React, избегая дублирования кода.

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

Для унификации обработчика используйте атрибут name у полей формы и один обработчик onChange, который по имени поля обновляет соответствующее значение в состоянии.

Длинный ответ

Проблема:
В формах с многими полями создание отдельного обработчика для каждого поля приводит к дублированию кода и усложнению компонента.

Решение:
Создайте один обработчик, который будет определять, какое поле изменилось, и обновлять состояние.

Пример реализации:

const UnifiedForm = () => {
  const [formData, setFormData] = useState({
    username: '',
    email: '',
    password: ''
  });

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

  return (
    <form>
      <input
        type="text"
        name="username"
        value={formData.username}
        onChange={handleChange}
      />
      <input
        type="email"
        name="email"
        value={formData.email}
        onChange={handleChange}
      />
      <input
        type="password"
        name="password"
        value={formData.password}
        onChange={handleChange}
      />
    </form>
  );
};

Преимущества:

  • Один обработчик для всех полей.

  • Легко добавлять новые поля без изменения логики.

  • Код становится чище и легче в обслуживание

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

Frontend developer

tech
tech
tech
tech
tech
tech
tech
tech
tech

Ментор по Frontend

Полное сопровождение до оффера — без дорогих курсов, с оплатой после трудоустройства

Записаться на консультацию

Уровень

  • Рейтинг:

    3

  • Сложность:

    7

Навыки

  • React

    React

Ключевые слова

#form

#handler

#state management

Подпишись на React Developer в телеграм

Frontend developer

tech
tech
tech
tech
tech
tech
tech
tech
tech

Ментор по Frontend

Полное сопровождение до оффера — без дорогих курсов, с оплатой после трудоустройства

Записаться на консультацию