Composants contrôlés et non contrôlés dans React

Composants contrôlés : composants React qui contrôlent l'état des éléments de formulaire via un état ou des accessoires, c'est-à-dire que chaque mutation d'état aura une fonction de gestionnaire associée.

Caractéristiques

• Valeur contrôlée par l'état - la valeur de l'élément est liée à la variable d'état
• Nécessite un gestionnaire d'événements - Pour mettre à jour l'état, vous avez besoin d'un gestionnaire d'événements
• Prévisible - Étant donné que l'état du composant représente la valeur d'entrée, le composant est prévisible et facile à déboguer
• React Gère les données d'entrée et ne s'appuie pas sur DOM pour garder une trace de la valeur d'entrée actuelle

import React, { useState } from 'react';

function ControlledForm() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

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

Composants non contrôlés : composant React où DOM lui-même gère l'état de l'élément de formulaire. React accède à la valeur d'entrée via ref, qui stocke son propre état en interne, et vous interrogez le DOM à l'aide d'une référence pour trouver sa valeur actuelle lorsque vous en avez besoin. Cela ressemble un peu plus au HTML traditionnel.

Caractéristiques

• Valeur contrôlée par DOM - La valeur du champ de saisie n'est pas liée à une variable d'état.
• Utilise Ref pour accéder à une valeur ou pour obtenir la valeur de l'élément d'entrée en cas de besoin
• Ils sont plus simples à configurer si vous n'avez pas besoin de contrôler les entrées en temps réel.
• Convient aux scénarios dans lesquels l'état de réaction n'est pas requis pour contrôler l'entrée.

import React, { useRef } from 'react';

function UncontrolledForm() {
  const inputRef = useRef();

  const handleSubmit = (event) => {
    event.preventDefault();
    alert('Input Value: ' + inputRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={inputRef} />
      <button type="submit">Submit</button>
    </form>
  );
}

Voici un tableau comparatif entre les composants contrôlés et non contrôlés :

Quand utiliser quand
Contrôlé - pour les validations en temps réel, le formatage des entrées ou les commentaires immédiats.
Non contrôlé - utilisé pour des cas d'utilisation simples comme les téléchargements de fichiers, la valeur du formulaire pré-rempli n'est pas fréquente ou doit être différée jusqu'à la soumission du formulaire.

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!