Dans React, un composant contrôlé fait référence à un composant qui met à jour la valeur actuelle via une fonction de rappel ; le composant React qui restitue le formulaire contrôle également les opérations qui se produisent sur le formulaire lors de la saisie de l'utilisateur. Chaque fois que l'état du formulaire change, il le fera. Être écrit Dans l'état du composant, ce type de composant est appelé composant contrôlé dans React.
L'environnement d'exploitation de ce tutoriel : système Windows 10, version React 17.0.1, ordinateur Dell G3.
Le composant React qui restitue le formulaire contrôle également ce qui arrive au formulaire lors de la saisie de l'utilisateur. Les éléments d'entrée de formulaire dont les valeurs sont ainsi contrôlées par React sont appelés « composants contrôlés ».
Certains internautes ont expliqué ceci : Dans React, chaque fois que l'état du formulaire change, il sera écrit dans l'état du composant. Ce type de composant est appelé composant contrôlé dans React.
Processus de mise à jour des composants contrôlés :
1. Vous pouvez définir la valeur par défaut du formulaire dans l'état initial
2. Chaque fois que la valeur du formulaire change, appelez le gestionnaire d'événements onChange.
3. Le processeur d'événements obtient l'état modifié via l'objet événement e et modifie l'état ;
4. setState déclenche la mise à jour de la vue et termine la mise à jour des valeurs des composants du formulaire.
Les composants contrôlés mettent à jour la valeur actuelle via des fonctions de rappel, telles que OnChange. Le composant parent contrôle et gère son état via des fonctions de rappel et lui transmet de nouvelles valeurs en tant que propriétés. Les composants contrôlés sont également appelés « composants stupides ».
const { useState } de 'react'; function Controlled () { const [email, setEmail] = useState(); const handleInput = (e) => setEmail(e.target.value); value={email} onChange={handleInput} //>;}Élargissez vos connaissances :
Que sont les composants non contrôlés ?
Les composants non contrôlés sont des composants qui stockent leur propre état en interne et peuvent utiliser ref pour interroger le DOM afin de trouver leur valeur actuelle en cas de besoin. Un peu comme le HTML traditionnel. La plupart des composants natifs du formulaire React prennent en charge le contrôle et le non-contrôle :
const { useRef } de 'react';function Exemple () { const inputRef = useRef(null); return <input type="text" defaultValue="bar" ref={inputRef} />}4Quelles sont les différences entre eux ?
Dans les composants contrôlés, les données du formulaire sont gérées par les composants React. Dans les composants non contrôlés, les données du formulaire sont gérées par le DOM lui-même.
Pour les composants contrôlés, l’état du composant doit être utilisé. Pour les composants non contrôlés, l'utilisation de state est totalement facultative, mais les références doivent être utilisées à l'intérieur de ceux-ci.
Pour les composants contrôlés, nous pouvons valider en entrée mais pas pour les composants non contrôlés.