Passwort anzeigen/verbergen umschalten

Einführung

In diesem Lab werden wir lernen, wie man ein Passwort-Eingabefeld mit einem Umschaltknopf erstellt, der es Benutzern ermöglicht, ihr Passwort anzuzeigen oder zu verbergen. Dies wird mit der useState()-Hook in React durchgeführt. Am Ende dieses Labs werdet ihr ein besseres Verständnis dafür haben, wie man im React den Zustand verwaltet und wie man einen einfachen, aber nützlichen Komponenten für die Benutzeroberfläche erstellt.

Passwort anzeigen/verbergen umschalten

In der VM wurden bereits index.html und script.js bereitgestellt. Im Allgemeinen müssen Sie nur Code in script.js und style.css hinzufügen.

Der folgende Code rendert ein Passwort-Eingabefeld mit einem Entschlüsselungsbutton. Er verwendet den useState()-Hook, um die shown-Zustandsvariable zu erstellen und ihren Anfangswert auf false zu setzen. Wenn der Anzeigen/Verbergen-Button angeklickt wird, wird die setShown-Funktion aufgerufen, um den type des Inputs zwischen 'text' und 'password' umzuschalten.

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

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

Bitte klicken Sie auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Lab "Passwort anzeigen/verbergen umschalten" abgeschlossen. Sie können in LabEx weitere Labs absolvieren, um Ihre Fähigkeiten zu verbessern.