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

Question

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

YeaHub · Accepted Answer

Проблема:В формах с многими полями создание отдельного обработчика для каждого поля приводит к дублированию кода и усложнению компонента.Решение:Создайте один обработчик, который будет определять, какое поле изменилось, и обновлять состояние.Пример реализации:const UnifiedForm = () => { const [formData, setFormData] = useState({ username: '', email: '', password: '' }); const handleChange = (event) => { const { name, value } = event.target; setFormData(prevState => ({ ...prevState, [name]: value })); }; return ( ); };Преимущества:Один обработчик для всех полей.Легко добавлять новые поля без изменения логики.Код становится чище и легче в обслуживаниеРасширение:Для сложных форм с вложенными данными можно использовать библиотеки Formik или React Hook Form, которые предоставляют готовые решения для управления состоянием форм.