𝗥𝗲𝗮𝗰𝘁 𝗙𝗼𝗿𝗺 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁 𝗕𝘂𝗶𝗹𝗱 𝗚𝘂𝗶𝗱𝗲

Guida alla creazione di un componente React Form

La creazione di form in React richiede una gestione attenta dello stato. Questa guida ti mostra come costruire un modulo di registrazione da zero.

Imparerai quattro concetti principali:

• Gestione dello Stato Memorizza tutti i campi del modulo in un unico oggetto di stato. Usa l'hook useState per tenere traccia di nome, età, email e password.

• Gestione degli Input Usa un'unica funzione per gestire tutti i cambiamenti degli input. Aggiorni lo stato tramite lo spread operator sui dati precedenti e aggiungendo il nuovo valore in base al nome dell'input.

• Validazione del Form Verifica che tutti i campi contengano dati prima dell'invio. Mostra un avviso se un campo è vuoto.

• Supporto Tastiera Aggiungi un listener per il tasto Invio. Questo permette agli utenti di inviare il modulo senza dover cliccare sul pulsante.

Esempio di codice:

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 (
    <form onKeyDown={handlekey}>
      <input name="name" onChange={getdata} value={userdata.name} />
      <input name="age" onChange={getdata} value={userdata.age} />
      <input name="mobile" onChange={getdata} value={userdata.mobile} />
      <input name="email" onChange={getdata} value={userdata.email} />
      <input name="dob" onChange={getdata} value={userdata.dob} />
      <input name="password" type="password" onChange={getdata} value={userdata.password} />
      <button type="button" onClick={validate}>Submit</button>
    </form>
  );
}

Fonte: https://dev.to/jayashree_a84b6eff7bc414e/react-form-component-blog-explanation-with-code-3enh