Champ de saisie contrôlé

Introduction

Dans ce laboratoire, nous allons apprendre à créer un champ de saisie contrôlé en React. Le champ de saisie contrôlé est un modèle courant utilisé pour gérer les valeurs d'entrée de formulaire dans les applications React. En utilisant une fonction de rappel pour informer le composant parent de tout changement de valeur, nous pouvons nous assurer que la valeur du champ de saisie est toujours synchronisée avec l'état du composant parent. Ce laboratoire nous guidera dans la création et l'utilisation d'un composant de champ de saisie contrôlé en React.

Champ de saisie contrôlé

index.html et script.js ont déjà été fournis dans la machine virtuelle. En général, vous n'avez qu'à ajouter du code à script.js et style.css.

Ce fragment de code fournit un élément <input> contrôlé qui utilise une fonction de rappel pour informer son parent de tout changement de sa valeur. Voici comment cela fonctionne :

• La valeur du champ de saisie contrôlé est déterminée par la propriété value transmise par le parent.
• Toute modification effectuée sur le champ de saisie par l'utilisateur est capturée par l'événement onChange, qui déclenche la fonction de rappel onValueChange et envoie la nouvelle valeur au composant parent.
• Pour mettre à jour la valeur du champ de saisie, le parent doit mettre à jour la propriété value qu'il transmet au composant de champ de saisie contrôlé.

Voici une implémentation exemple du composant ControlledInput, suivie d'un exemple d'utilisation dans un composant Form :

const ControlledInput = ({ value, onValueChange, ...rest }) => {
  return (
    <input
      value={value}
      onChange={({ target: { value } }) => onValueChange(value)}
      {...rest}
    />
  );
};

const Form = () => {
  const [value, setValue] = React.useState("");

  return (
    <ControlledInput
      type="text"
      placeholder="Insérez du texte ici..."
      value={value}
      onValueChange={setValue}
    />
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<Form />);

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez actualiser l'onglet Web 8080 pour prévisualiser la page web.

Résumé

Félicitations ! Vous avez terminé le laboratoire sur le champ de saisie contrôlé. Vous pouvez pratiquer d'autres laboratoires sur LabEx pour améliorer vos compétences.