inputに入力された文字を扱う

はじめに

この記事はreact初心者が学習記録程度に書き残したノートです。
この記事を参考に一～十まで学ぼうとしないでください！

できること

1. inputタグに入力した値をクライアントのjsで受け取る
2. 受け取った値をjsで加工して表示する

import { Link } from "react-router-dom";
/* point1 */
import React, { useState } from "react";

const SignUp = () => {

    /* point2 */
    const [email, setEmail] = useState("");
    const [decideEmail, setDecideEmail] = useState("");
    const [pass, setPass] = useState("");
    const [decidePass, setDecidePass] = useState("");

    /* ↓表示ボタンをクリックした時の処理 */
    const onClickDisplayValue = () => {
        const mark = "●";
        let hiddenPass = mark.repeat(pass.length);
        let makedEmail = email + "@mail.com";
        setDecideEmail(hiddenPass);
        setDecidePass(makedEmail);
    }

    return (
        <>
            <h1>新規登録ページ</h1>
            <div>
                {/* point3 */}
                <p>メールアドレス<input 
                type="text" 
                value={email} 
                onChange={(event) => setEmail(event.target.value)}
                /></p>
                <p>パスワード<input 
                type="text" 
                value={pass} 
                onChange={(event) => setPass(event.target.value)}
                /></p>
                <button onClick={onClickDisplayValue}>表示</button>
                {/* 表示部分 */}
                <p>パスワード：{decidePass}</p>
                <p>メールアドレス：{decideEmail}</p>
            </div>
            <div>
                <p>ログインは<Link to={`/login/`}>こちら</Link></p>
                <p><Link to={`/`}>ホームに戻る</Link></p>
            </div>
        </>
    );
};

export default SignUp;

point1：useStateを使ってinputの値を取得する

useStateとは

reactで用意されているフックAPIの1つ

フックとは

ある状態を保存する変数とその状態を更新するための関数を１セットにしたもの
詳しくはpoint2で。

準備する

以下の１行を書き込めばuseStateを使う準備は整います。
npmでinstallとかは特に行いませんでした。

import React, { useState } from "react";

point2：state変数の宣言

const [email, setEmail] = useState("");
const [decideEmail, setDecideEmail] = useState("");
const [pass, setPass] = useState("");
const [decidePass, setDecidePass] = useState("");

この部分で行っています。

const [状態を保存する変数の名前, 更新用の関数の名前] = useState("");

の形で宣言します。
確かに「ある状態を保存する変数」と「その状態を更新するための関数」が１セットになってます。
これをフックと呼ぶようです。

point3：inputの書き方にも注意

<p>メールアドレス
<input type="text" value={email} 
onChange={(event) => setEmail(event.target.value)} />
</p>

inputの書き方も一癖あります。
①文字の入力を検知
②検知したらset関数で状態を更新
を繰り返します。

「onChange={(event) => setEmail(event.target.value)}」で実現しています。

面白いのが、setで更新すれば、画面上へのレンダリングは自動で行ってくれるのです。

ボタンを押したら値を取得して加工して表示

取得～加工～表示をざっくり。
イベント「onClickDisplayValue」をボタンのイベントに設定しています。
中身は単純。ボタンを押した段階のパスワードとメールアドレスはそれぞれ「pass」「email」に保存されているので、そいつをひっぱってくるだけ。

あとは、表示用にそれぞれ１つずつ、計２つフック変数を用意しました。
「decidePass」「decideEmail」です。
passとemailは入力するたびに中身が変わるので、ボタンを押した時に状態が書き変わる用のフックが欲しかったからです。

あとは加工します。今回は伏字と文字連結。ここは説明省きます。

最後に加工したものをset関数で表示すれば、ボタンを押した時の表示が完成です。