Créer un basculement de mot de passe avec React

Introduction

Dans ce laboratoire, nous allons apprendre à créer un champ de saisie de mot de passe avec un bouton basculant permettant aux utilisateurs d'afficher ou de cacher leur mot de passe. Cela sera fait à l'aide du hook useState() dans React. À la fin de ce laboratoire, vous aurez une meilleure compréhension de la manière de gérer l'état dans React et de créer un composant simple mais utile pour l'interaction avec l'utilisateur.

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 91%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Basculer l'affichage/cachage du mot de passe

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.

Le code suivant affiche un champ de saisie de mot de passe avec un bouton d'affichage. Il utilise le hook useState() pour créer la variable d'état shown et définir sa valeur initiale sur false. Lorsque le bouton Afficher/Cacher est cliqué, la fonction setShown est appelée, basculant le type de l'input entre 'text' et 'password'.

const PasswordRevealer = ({ value }) => {
  const [shown, setShown] = React.useState(false);
  return (
    <>
      <input type={shown ? "text" : "password"} value={value} />
      <button onClick={() => setShown(!shown)}>Afficher/Cacher</button>
    </>
  );
};

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

Veuillez cliquer sur 'Démarrer' 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 Basculer l'affichage/cachage du mot de passe. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.