Przewodnik budowania komponentu formularza w React

Budowanie formularzy w React wymaga starannego zarządzania stanem. Ten przewodnik pokaże Ci, jak zbudować formularz rejestracyjny od zera.

Nauczysz się czterech głównych koncepcji:

• Zarządzanie stanem Przechowuj wszystkie pola formularza w jednym obiekcie stanu. Użyj hooka useState, aby śledzić imię, wiek, e-mail i hasło.

• Obsługa pól wejściowych Użyj jednej funkcji do zarządzania wszystkimi zmianami w polach wejściowych. Aktualizujesz stan, rozszerzając stare dane i dodając nową wartość na podstawie nazwy pola.

• Walidacja formularza Sprawdź, czy wszystkie pola zawierają dane przed przesłaniem. Wyświetl alert, jeśli jakiekolwiek pole jest puste.

• Obsługa klawiatury Dodaj nasłuchiwanie klawisza Enter. Pozwala to użytkownikom przesłać formularz bez klikania przycisku.

Przykład kodu:

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 (

); }

Źródło: https://dev.to/jayashree_a84b6eff7bc414e/react-form-component-blog-explanation-with-code-3enh