React を使ってパスワードトグルを作成する

はじめに

この実験では、ユーザーがパスワードを表示または非表示にできるトグルボタン付きのパスワード入力フィールドを作成する方法を学びます。これは、React のuseState()フックを使用して行われます。この実験が終了するまでに、React における状態管理の方法と、ユーザーインタラクション用のシンプルで役立つコンポーネントを作成する方法をより深く理解するようになります。

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この初級レベルの実験の完了率は 91%です。学習者から 100% の好評価を得ています。

パスワードの表示/非表示トグル

VM 内には既にindex.htmlとscript.jsが用意されています。一般的には、script.jsとstyle.cssにのみコードを追加すればよいです。

次のコードは、表示ボタン付きのパスワード入力フィールドをレンダリングします。useState()フックを使ってshownという状態変数を作成し、その初期値をfalseに設定しています。「表示/非表示」ボタンがクリックされると、setShown関数が呼び出され、入力のtypeが'text'と'password'の間で切り替わります。

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

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

右下隅の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行してください。その後、Web 8080タブを更新して、ウェブページをプレビューできます。

まとめ

おめでとうございます！パスワードの表示/非表示トグルの実験を完了しました。スキルを向上させるために、LabEx でさらに多くの実験を行って練習してください。