quels sont les composants contrôlés par réaction

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. il sera é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, React version 17.0.1, ordinateur Dell G3.

Que sont les composants contrôlés par React ?

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. 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énement obtient l'état modifié via l'objet événement e et modifie l'état

• 4. setState déclenche la mise à jour de la vue pour terminer la mise à jour de la valeur du composant de formulaire

Le composant contrôlé est via le fonction de rappel Mettre à jour la valeur actuelle, telle 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 } from 'react';
function Controlled () {
  const [email, setEmail] = useState();
  const handleInput = (e) => setEmail(e.target.value);
  return <input type="text" value={email} onChange={handleInput} />;
}

Connaissances approfondies :

Que sont les composants non contrôlés ?

Les composants non contrôlés sont des composants qui stockent leur propre état en interne. Vous pouvez utiliser ref pour interroger le DOM afin de trouver sa valeur actuelle en cas de besoin. Un peu comme le HTML traditionnel. La plupart des composants natifs du formulaire React prennent en charge à la fois le contrôle et le non-contrôlé :

const { useRef } from 'react';
function Example () {
  const inputRef = useRef(null);
  return <input type="text" defaultValue="bar" ref={inputRef} />
}

4 Quelle est la différence 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.

【Recommandations associées : tutoriel vidéo javascript, front-end web】

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!