Élément <textarea> non contrôlé dans React

Introduction

Dans ce laboratoire, nous allons apprendre à créer un élément <textarea> non contrôlé dans React. Le but de ce laboratoire est de montrer comment utiliser les propriétés defaultValue et onChange pour passer la valeur de la zone de texte à une fonction de rappel dans le composant parent. À la fin de ce laboratoire, vous aurez une meilleure compréhension de la création de champs de saisie non contrôlés dans React.

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.

Élément `<textarea>` 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.

Cette fonction affiche un élément <textarea> qui n'est pas contrôlé par le composant parent. Elle utilise une fonction de rappel pour passer la valeur de l'entrée au composant parent.

Pour utiliser cette fonction :

Passez la propriété defaultValue du composant parent comme valeur initiale du champ de saisie.
Utilisez l'événement onChange pour déclencher la fonction de rappel onValueChange et envoyer la nouvelle valeur au parent.

const TextArea = ({
  cols = 20,
  rows = 2,
  defaultValue,
  onValueChange,
  ...rest
}) => {
  return (
    <textarea
      cols={cols}
      rows={rows}
      defaultValue={defaultValue}
      onChange={({ target: { value } }) => onValueChange(value)}
      {...rest}
    />
  );
};

Utilisation de l'exemple :

ReactDOM.createRoot(document.getElementById("root")).render(
  <TextArea
    placeholder="Insérez du texte ici..."
    onValueChange={(val) => console.log(val)}
  />
);

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.

Sommaire

Félicitations ! Vous avez terminé le laboratoire sur l'élément <textarea> non contrôlé. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.