【React】event属性を受け取る。

オブジェクト形式の複数の値を受け取る方法。【自分用メモ】

React勉強中のため、間違っていたらご指摘ください。

Login画面を想定

まずは全体像

import axiosInstance from "../../axios";
import React, {useState} from "react";

const Login = () => {
    
   //受け取る初期値
    const initInput = {
        email: '',
        password: ''
    }
    //useStateで初期値を代入
    const [state, setState] = useState(initInput)
    
　　　　　　　　//入力されたときに発火される。
　　　　　　　　const HandleChange = (e) => {
　　　　　　　　　　　　　　　　//入力された値を受け取る。
        const value = e.target.value
　　　　　　　　　　　　　　　　//入力フォームが複数あるため、e.target.nameでインプット要素のname属性を受け取る。
        const name = e.target.name
　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　//スプレッド演算子で要素を分解し、取得したname属性を割り当ててフォームの区別をしている。
        setState({...state, [name]: value})
        console.log(state)
    }
    const HandleLogin = async () => {
       const result = await axiosInstance.post('auth/jwt/create/', state)
        console.log(result)
    }

    return (
        <>
            <form action="">
                <label htmlFor="email">email</label>
                  <input id="email" name="email" type="email" value={state.email} onChange={HandleChange} />
                 <label htmlFor="password">password</label>
                  <input id="password"  name="password" type="password"  value={state.password} onChange={HandleChange} />
                <button onClick={HandleLogin}>ログイン</button>
            </form>

        </>
    )
}

export default Login

ポイント

1. 入力フォームごとにuseStateを設定することもできるけど、コードが多くなるので行けてない。
2. e.target.nameで入力されたname属性ごとにsetStateに渡せるとスッキリする。

　　　　　　　　//入力されたときに発火される。
　　　　　　　　const HandleChange = (e) => {
　　　　　　　　　　　　　　　　//入力された値を受け取る。
        const value = e.target.value
　　　　　　　　　　　　　　　　//入力フォームが複数あるため、e.target.nameでインプット要素のname属性を受け取る。
        const name = e.target.name
　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　//スプレッド演算子で要素を分解し、取得したname属性を割り当ててフォームの区別をしている。
        setState({...state, [name]: value})
        console.log(state)

もっといい方法があればご教示ください。

ありがとうございました。