を表示/非表示のパスワードをトグルでフックフック

我々がサインアップ/signinフォームを構築するとき、それはユーザーのために機能を実装するためにクールです、彼の入力する現在の値を見ることができます.これは本当に簡単に反応を使用して、あまりにもダイビングをすることができます.

npm i react-hook-form

基本的な検証のためにreact-hook-formをインストールします.といくつかのファンシーアイアイコンのfontawesome iconsを使用します.

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/react-fontawesome

今すぐコンポーネントを作成するだけで基本的なフォームを2つの入力と送信ボタンを

import React from "react";
import { useForm } from "react-hook-form";
import "./styles.css";

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faEye } from "@fortawesome/free-solid-svg-icons";
const eye = <FontAwesomeIcon icon={faEye} />;

export default function App() {
  const { register, handleSubmit } = useForm();
  const onSubmit = data => {
    console.log(data);
  };

  return (
    <div className="App">
      <input
        name="username"
        type="text"
        placeholder="Username"
        ref={register({ required: "This is required." })}
      />
      <div className="pass-wrapper">
        <input
          placeholder="Password"
          name="password"
          type="password"
          ref={register({ required: "This is required." })}
        />
        <i>{eye}</i>
      </div>
      <button type="submit" onClick={handleSubmit(onSubmit)}>
        Submit
      </button>
    </div>
  );
}

そして、よりきれいなルックスのために

.App {
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-items: center;
  font-size: 22px;
  max-width: 500px;
  min-height: 672px;
  margin: 0 auto;
  border-radius: 25px;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
}

.App > input {
  margin-top: 200px;
}

input {
  margin: 0 auto;
  background-color: black;
  opacity: 50%;
  color: white;
  margin-top: 10px;
  width: 300px;
  height: 59px;
  font-size: 22px;
  margin-bottom: 14px;
  max-width: 527px;
  padding: 0 10%;
}

.pass-wrapper {
  position: relative;
  display: flex;
  margin-bottom: 14px;
}

i {
  position: absolute;
  top: 38%;
  right: 16%;
}
i:hover {
  color: #00fcb6;
  cursor: pointer;
}

button {
  width: 300px;
  height: 50px;
  margin: 0 auto;
}

コンポーネントは、次のようになります

では、現在のパスワードフィールドビューを追跡するブール値でいくつかの状態を追加できます

const [passwordShown, setPasswordShown] = useState(false);

と値をトグルする関数

  const togglePasswordVisiblity = () => {
    setPasswordShown(passwordShown ? false : true);
  };

あなたのプロジェクトでこれを実行するために他のアイコンまたはボタンを使うことができる方法によって、我々の目アイコンにOnClickハンドラーを加えさせてください

<i onClick={togglePasswordVisiblity}>{eye}</i>

最後に我々は、入力の種類を変更します

 <input
             ...
              type={passwordShown ? "text" : "password"}
             ...
            />

それは今、私たちはあなたの目のアイコンをクリックするだけで現在のパスワードプレースホルダーのビジュアルを変更することができます.すべてのコードを参照する場合は、このCodesandBoxリンクShow/Hide Password on toggleを確認してください.
このチュートリアルが役に立ちましたら、このようにしてください)