Руководство по созданию компонента формы в React
Создание форм в React требует тщательного управления состоянием. В этом руководстве показано, как создать регистрационную форму с нуля.
Вы изучите четыре основные концепции:
• Управление состоянием
Храните все поля формы в одном объекте состояния. Используйте хук useState, чтобы отслеживать имя, возраст, email и пароль.
• Обработка ввода Используйте одну функцию для управления всеми изменениями ввода. Вы обновляете состояние, копируя старые данные и добавляя новое значение на основе имени поля.
• Валидация формы Проверяйте, заполнены ли все поля, перед отправкой. Если какое-либо поле пустое, выводите alert.
• Поддержка клавиатуры Добавьте слушатель для клавиши Enter. Это позволит пользователям отправлять форму, не нажимая на кнопку.
Пример кода:
import { useState } from "react";
function FormValidation() { const [userdata, setUserdata] = useState({ name: "", age: "", mobile: "", email: "", dob: "", password: "" });
function getdata(e) { const { name, value } = e.target; setUserdata({ ...userdata, [name]: value }); }
function validate() { const { name, age, mobile, email, dob, password } = userdata; if (name && age && mobile && email && dob && password) { alert("Submitted successfully"); } else { alert("Please fill all fields"); } }
function handlekey(e) { if (e.key === "Enter") { validate(); } }
return (
); }Источник: https://dev.to/jayashree_a84b6eff7bc414e/react-form-component-blog-explanation-with-code-3enh