Dans React, il existe deux approches principales pour gérer les entrées de formulaire :

• Composants contrôlés
• Composants non contrôlés

Les composants contrôlés offrent plus de contrôle et de validation, tandis que les composants non contrôlés sont plus simples et utiles pour les formes de base d'accès intermittent aux valeurs.

Composants contrôlés

Ce sont des entrées de formulaire dont les valeurs sont contrôlées par React State. Les variables d'état sont mises à jour chaque fois que la valeur de l'entrée change, et la valeur de l'entrée est définie explicitement via la propriété value.

Le gestionnaire d'événements onChange est utilisé pour mettre à jour l'état.

import React, { useState } from "react";
function ControlledComponent() {
     const [name, setName] = useState("")

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

     return(
          
     );
}

Dans l'exemple ci-dessus, la variable d'état name contrôle la valeur du champ de saisie. La fonction handleChange met à jour l'état du nom chaque fois que la valeur d'entrée change et que la valeur d'entrée est définie sur la valeur actuelle de la variable d'état du nom via la propriété de valeur.

Composants non contrôlés

Les composants non contrôlés sont des entrées de formulaire qui gèrent leur état en interne, plutôt que d'être contrôlées par React State. Vous pouvez accéder à la valeur actuelle de l'entrée à l'aide d'un ref après la soumission du formulaire ou chaque fois que nécessaire.

import React, { useRef } from "react";
function UncontrolledComponent() {
     const inputRef = useRef(null);

     const handleSubmit = (e) => {
          e.preventDefault();
          console.log(inputRef.current.value);
     };

     return(
          

Dans cet exemple ci-dessus, le inputRef est utilisé pour créer un ref pour le champ input. La fonction handleSubmit accède à la valeur actuelle de l'entrée à l'aide de inputRef.current.value. La logique de soumission du formulaire peut être implémentée pour utiliser la valeur d'entrée selon les besoins.