Passer au contenu principal

Maîtriser les formulaires React : champs contrôlés et non contrôlés

Champs contrôlé

Pour avoir un champ contrôlé en React, il faut définir les attributs value et onChange.

Si onChange n’est pas défini, React n’autorisera pas la modification du champ, car il s’assurera que sa valeur ne change jamais.

import { useState } from "react";

export default function App() {
  const [fullName, setFullName] = useState("John doe");

  const handleChange = (e) => {
    setFullName(e.target.value);
  };

  return (
    <>
      <form>
        <input
          type="text"
          name="fullName"
          value={fullName}
          onChange={handleChange}
        />
      </form>

      <div>My name is : {fullName}</div>
    </>
  );
}

L’inconvénient des champs contrôlés est qu’à chaque changement d’état, le composant sera rendu. Si nous avons beaucoup de propriétés, le composant sera rendu plusieurs fois, ce qui peut affecter les performances.

La valeur de value ne doit jamais être undefined, car cela ferait passer le champ de contrôlé à non contrôlé, ce que React n’accepte pas.

Utilisation :

  • Lorsque vous avez besoin de synchroniser l’état du champ avec l’état du composant.
  • Lorsque vous souhaitez valider ou manipuler les données saisies en temps réel.
  • Lorsque vous avez besoin de déclencher des actions spécifiques à chaque changement de valeur.

Champs non contrôlé

export default function App() {
  const handleSubmit = (e) => {
    e.preventDefault();

    console.log(e.target);
  };

  return (
    <>
      <form onSubmit={handleSubmit}>
        <input type="text" name="fullName" defaultValue="John Doe" />
        <button>Submit</button>
      </form>
    </>
  );
}

Dans ce cas, React ne contrôle plus ce champ, ce qui permet de saisir librement des données.

Si nous souhaitons savoir ce qui a été saisi, nous pouvons utiliser des événements classiques comme submit.

L’attribut defaultValue permet de définir une valeur par défaut pour un champ.

Utilisation :

  • Lorsque vous n’avez pas besoin de synchroniser l’état du champ avec l’état du composant.
  • Lorsque vous souhaitez simplement récupérer la valeur du champ lors de la soumission du formulaire.
  • Lorsque vous avez besoin de manipuler des formulaires simples avec peu de logique.
Retour en haut