Guide de création de composant de formulaire React

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

La création de formulaires dans React nécessite une gestion rigoureuse de l'état. Ce guide vous montre comment construire un formulaire d'inscription de zéro.

Vous apprendrez quatre concepts principaux :

• Gestion de l'état Stockez tous les champs du formulaire dans un seul objet d'état. Utilisez le hook useState pour suivre le nom, l'âge, l'e-mail et le mot de passe.

• Gestion des entrées Utilisez une seule fonction pour gérer tous les changements d'entrée. Vous mettez à jour l'état en étalant les anciennes données et en ajoutant la nouvelle valeur en fonction du nom de l'entrée.

• Validation du formulaire Vérifiez si tous les champs contiennent des données avant la soumission. Affichez une alerte si un champ est vide.

• Support du clavier Ajoutez un écouteur pour la touche Entrée. Cela permet aux utilisateurs de soumettre le formulaire sans cliquer sur le bouton.

Exemple de code :

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>
  );
}

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