Erstelle einen Passwort-Umschalter mit React

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.

Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Anfänger mit einer Abschlussquote von 91% ist. Es hat eine positive Bewertungsrate von 100% von den Lernenden erhalten.

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.