Entrées contrôlées et non contrôlées

Les entrées contrôlées et non contrôlées sont des termes utilisés dans le contexte des entrées de formulaire dans le développement Web, en particulier dans des frameworks comme React.

Entrées contrôlées

Dans les entrées contrôlées, la valeur du champ de saisie est contrôlée par l'état du composant. Cela signifie que l'état du composant contient la valeur actuelle de l'entrée et que lorsque la valeur d'entrée change (par exemple, via la saisie de l'utilisateur), il met à jour l'état et la valeur d'entrée reflète l'état. Cela se fait généralement en définissant le prop value de l'entrée sur la valeur d'état et en fournissant un gestionnaire onChange pour mettre à jour l'état lorsque l'entrée change. Les entrées contrôlées sont couramment utilisées dans les applications React pour la gestion des formulaires.

import React, { useState } from 'react';

function ControlledInputExample() {
  const [inputValue, setInputValue] = useState('');

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

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

Entrées non contrôlées

Dans les entrées non contrôlées, la valeur du champ de saisie n'est pas directement contrôlée par l'état React. Au lieu de cela, l’élément d’entrée gère son propre état en interne. Cela signifie que React n'a pas de contrôle direct sur la valeur d'entrée et que pour obtenir la valeur, vous devez généralement accéder directement au DOM (par exemple, en utilisant des références) plutôt que d'interroger l'état de React. Les entrées non contrôlées sont moins courantes dans React mais peuvent être utiles dans certaines situations, par exemple pour gérer des comportements de formulaire complexes ou pour l'intégration avec des bibliothèques non React qui gèrent l'état d'entrée différemment.

import React, { useRef } from 'react';

function UncontrolledInputExample() {
  const inputRef = useRef(null);

  const handleClick = () => {
    console.log(inputRef.current.value);
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Get Value</button>
    </div>
  );
}

En résumé, les entrées contrôlées lient la valeur d'entrée directement à l'état React, offrant plus de contrôle et de synchronisation entre l'interface utilisateur et l'état. Les entrées non contrôlées sont gérées en interne par le DOM ou d'autres bibliothèques, React accédant indirectement à leurs valeurs en cas de besoin.

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!