Maîtriser les champs d'entrée non contrôlés avec React

Introduction

Dans ce laboratoire, nous allons explorer la manière de créer un champ d'entrée non contrôlé à l'aide de React. Un champ d'entrée non contrôlé est un moyen simple et flexible de capturer l'entrée de l'utilisateur sans gérer l'état de la valeur dans le composant parent. Nous utiliserons une fonction de rappel pour informer le parent des mises à jour de valeur, ce qui facilite l'intégration avec d'autres composants et API.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 100%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Champ d'entrée non 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 code affiche un élément <input> non contrôlé qui utilise une fonction de rappel pour informer son parent des mises à jour de valeur. Pour l'utiliser :

Passez la valeur initiale depuis le parent en utilisant la propriété defaultValue.
Passez une fonction de rappel appelée onValueChange pour gérer les mises à jour de valeur.
Utilisez l'événement onChange pour déclencher la fonction de rappel et envoyer la nouvelle valeur au parent.

Voici un exemple :

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

ReactDOM.createRoot(document.getElementById("root")).render(
  <UncontrolledInput
    type="text"
    placeholder="Insérez du texte ici..."
  />
);

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 d'entrée non contrôlé. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.