パスワードを表示/非表示機能で反応フックとフォームを反応させる.

このチュートリアルでは、どのように反応のフォームを作成することができますどのように反応フックを使用して機能を表示し、任意の外部反応フォームのNPMパッケージなしのパスワードを隠します.
我々が成し遂げるつもりである最終的な働くプロトタイプ.

あなたがどのように反応で始めるかを知りたいならば、私の前の記事を見てください.
我々は、我々の反応形のために2つのフックを使うつもりです.

1 . USENT。

2 . UserF。

最初に、これらの2つのフック(このチュートリアルの後、私は、私が反応フックフックの名前で使用していたフックを反応させる詳細な分析をしています)に簡単なイントロを与えます.

米国

反応フックの導入で、我々は簡単にUSEstateフックで州を変えることができます.その前に、クラスコンポーネントの状態を初期化するコードをたくさん使用しなければなりませんでした.

文法

準拠

UserF :

反応フックがつくられる前に、我々は反応を使用しなければなりませんでした.CREATEREFとDOM要素にアクセスして操作します.userefでは、上記のステップを行うのは非常に簡単です.

文法

const password = useRef();
const changetype = () => {

password.current.type="password"

} 
<input type ="text" onClick={changetype} ref={password}></input>

まず必要なパッケージをインポートします.import React, {useState,useRef} from 'react';今私たちはフォント素晴らしいアイコンをインストールするフォントの素晴らしいアイコンを使用するようにインストールする必要があります.js

In simple Html, CSS webpage we would get the script tag from font-awesome website and place it in head tag and use in body tag to use font-awesome.

In React we have to install font-awesome npm packages to do that.

以下のコードをコピーしてペーストして、フォント素晴らしいNPMパッケージをインストールします.npm i --save @fortawesome/fontawesome-svg-core npm install --save @fortawesome/free-solid-svg-icons npm install --save @fortawesome/react-fontawesomeそれで、反応でフォームハンドリングに入りましょう.js
我々は反応の機能的なコンポーネントを作成します.JSと必要なコードを追加します.

const Form  = () =>{
    return (
        <div>
            <form onSubmit={submit}>

<div className="grid">
<div>
<input type = "email" value={email} name="email" onChange={change}></input>
</div>
<div>
<input type = "password" value={password} name="password" onChange={change}></input>
</div>
<div>
<input type = "submit"  name="submit" ></input>
</div>
</div>

            </form>
        </div>
    )
}

今すぐ変更を定義し、反応で機能を提出することができます.js

私たちは電子メールとパスワードでオブジェクトタイプのUSENTフックを作成し、それを構造化します.

で、HTMLタグの名前をその値に設定することで、' change '関数を定義します.名前と値を以下のように確認してください.

<input type = "email" value={email} name="email" onChange={change}></input>

私たちは、オブジェクトに既存の要素を保つために、広げられたオペレーターを使用します.

入力値が変更されるたびに'変更'関数がトリガされます.

以降、[ e . target . name ]の配列のキーを使用して、与えられた入力値をUSENTのオブジェクトキー値ペアに設定します.

これらの手順の後、Submit機能は、Submitボタンの既定の動作(送信ボタンがページ再読み込みをクリックしたとき)が削除され、UX目的の状態がクリアされていることを定義します.

Submit機能で/あなた自身のAxios/フェッチでバックエンドのロジックを実装する必要があります.

const [formdata,setformdata]=useState({


email:'',
password:'',


})

const {
email,
password,
} = formdata;


const change=(e)=>{

setformdata({...formdata,[e.target.name]:e.target.value})

}
const submit = e =>{

    e.preventDefault();
    // Submit to backend API with Axios/fetch 
    // Implement your backend logic here. 

setformdata({


email:'',
password:''



})

}

現在<input type = "password" value={password} name="password" onChange={change}></input>我々は/非表示のパスワードの機能を追加します.
あなたの反応ファイルでは、フォント素晴らしいパッケージを含む次のコードが含まれます.

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

import { faEye,faEyeSlash } from "@fortawesome/free-solid-svg-
icons";

const Eye = <FontAwesomeIcon className="icon" icon={faEye} />;

const EyeSlash = <FontAwesomeIcon className="icon" icon ={faEyeSlash}/>;

変更の上にusestateとuserefフックを加えて、機能を提出してください.

const[show,setshow]=useState(false)
const pass = useRef();

Submit関数で以下の変更を行います.
を送信する
E . preventDefaulted () ;
データ型
名前:''
電子メール:';、
パスワード:'
))>
//以下の新しいコード
setshow ( false )
｝
以下のようにパスワードを入力します.

<div className="eye">

<input ref={pass} type = "password" placeholder="Enter Password"value={password} name="password" onChange={change}></input>

{show ? <i onClick={showpassword}>{Eye}</i>:<i onClick={showpassword}>{EyeSlash}</i>}

</div>

今は本当に仕事をするコードを追加できます.
目のボタンがクリックされているときに以下のコードが発生します.
ページが最初に読み込まれるとき、それはパスワードタイプ属性として残ります.
しかし、目のボタンをクリックすると、そのタイプがテキスト属性に変更されます.今、テキストが表示されます.
inputのtype属性はuserefの助けを借りて変更されます.現在のプロパティ.
それは同じe . targetです.しかし、反応フックの助けを借りて.
HTMLタグに関連付けられている値、型、名前、その他のHTML属性をuserefに変更できます.現在のプロパティ.
そこで、今のところ、アイボタンをクリックしたとき、パスワードからテキストへの入力[ type ="password "]の属性を変更します.
それから、目のボタンは私たちがそれをクリックすると、これは反応のUSENTフックで行われて削減される.
まず最初に、それをfalseとして設定し、それからアイボタンをクリックすると、状態はfalseからtrueに変わります.
したがって、以下のようにonclick ' showpassword '関数コードを追加します.

const showpassword = () =>{

setshow(!show)
pass.current.type = show ? 'password':'text';

}

そしてそれをthats、我々はショー/非表示機能を持つシンプルで効果的な反応フォームを作成しました.
ここで使用するCSSコードです.

@import url("https://fonts.googleapis.com/css2?family=Ovo&display=swap");

* {
  font-family: "Ovo", serif;
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

.grid{
margin-top: 10%;
margin-left: 35%;
margin-right:35%;
display:flex;
flex-direction: column;
box-shadow: 0 0 6px grey;
height:65vh;

}

input{


 padding:10px; 
 width:75%;
 margin:20px;
 margin-top: 10px;
 margin-left: 10%;
font-size: 20px;


}

input:active, input:focus{
transition: 1s;
border:2px solid blue;
outline:none;
}


input[type="submit"]{

 transition: 1s;
 width:20%;
 margin-left: 35%;
 color:white;
border:none;
outline:none;
background-color: blue;
font-size: 20px;
font-weight: 600;


}

input[type="submit"]:hover{

transition: 1s;
cursor: pointer;
transform: translateY(-2px);
box-shadow: 0 0 6px red;

}

.eye{

  position: relative;
  display: flex;
  margin-bottom: 14px;

}

i {
  position: absolute;
  top: 35%;
  right: 18%;
}
i:hover {
    cursor: pointer;
}

.topic{

margin-top: 5%;
margin-bottom:5%;
margin-left: 27%;
margin-right: 23%;    
font-size: 30px;
text-decoration: underline;

}

.label{

margin-left: 10%;
margin-top: 10px;
font-size: 20px;
font-weight: 600;
}

The complete Form.js file code.

import React,{useState,useRef} from 'react'
import "./form.css"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faEye,faEyeSlash } from "@fortawesome/free-solid-svg-icons";
const Eye = <FontAwesomeIcon className="icon" icon={faEye} />;
const EyeSlash = <FontAwesomeIcon className="icon" icon ={faEyeSlash}/>;

const Form = () => {

const [formdata,setformdata]=useState({

email:'',
password:'',


})

const {
email,
password,
} = formdata;

const[show,setshow]=useState(false)
const pass = useRef();

const change=(e)=>{

setformdata({...formdata,[e.target.name]:e.target.value})

}
const submit = e =>{

    e.preventDefault();


setformdata({

name:'',
email:'',
password:''



})

setshow(false)

}



const showpassword = () =>{

setshow(!show)
pass.current.type = show ? 'password':'text';

}


    return (
        <div>
            <form onSubmit={submit}>

<div className="grid">

<div className="topic">Register Form</div>
<div className="label">Email:</div>
<input type = "email" value={email} placeholder="Enter Email"name="email" onChange={change}></input>

<div className="label">Password:</div>
<div className="eye">


<input ref={pass} type = "password" placeholder="Enter Password"value={password} name="password" onChange={change}></input>

{show ? <i onClick={showpassword}>{Eye}</i>:<i onClick={showpassword}>{EyeSlash}</i>}



</div>


<div>
<input type = "submit"  name="submit" ></input>
</div>
</div>

            </form>
        </div>
    )
}

export default Form;

`
あなたは私のgithubレポの下に完全なソースコードを見つけることができます.
React Forms with show/hide functionality .
しかし、まだこれはエラー処理を持っていません、しかし、将来、私はそれを加えて、ここで関連を与えます.
このロジックを追加できます.

私の経験

この記事は研究と実行に多くの時間を要した.あなたが反応フォームで苦労しているならば、これはあなたのためです.
私はフックの右側に反応フォームを得るために多くの時間のためにテーブルの上に私の頭をぶつけた.
だから、このものをマスターするあなたの時間がかかる.
フォームは非常に任意のウェブサイトに不可欠です.だからこの記事の助けを借りてそれをつかむ.

読んでくれてありがとう！

この記事のような場合は、ユニコーンこの1!ハート/これのように、後でそれを読むためにそれを保存します.

その他