Réagir aux composants contrôlés/non contrôlés

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 prop de valeur.

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(
          <input
               type="text"
               value={name}
               onChange={handleChange}
          />
     );
}

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 prop 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'une 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(
          <form onSubmit={handleSubmit}>
               <input
                    type="text"
                    ref={inputRef}
               />
               <button type="submit">Submit</button>
          </form>
     );
}

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 en utilisant inputRef.current.value. La logique de soumission du formulaire peut être implémentée pour utiliser la valeur d'entrée selon les besoins.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!