Вопрос проверяет умение создавать эффективные обработчики для форм с множеством полей в 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, которые предоставляют готовые решения для управления состоянием форм.