複数の入力状態の管理[react]

複数の入力ステータスの管理
複数入力時に複数のuseStateを使用するのは良い方法ではありません.
良い方法は、inputでnameという値を設定し、イベントが発生したときにその値を参照することです.
複数の文字列形式を持つオブジェクト形式を管理する必要があります.

function InputSample(){
    const [inputs, setInputs] = useState({
        name:'',
        nickname:'', 
    });
    const {name, nickname} = inputs;

    const onChange = (e)=>{
        console.log(e.target.name);
        console.log(e.target.value);
    }

    const onReset = ()=>{
        
    }
    return (
        <div>
            <input name="name" placeholder="이름" onChange={onChange}/>
            <input name="nickname" placeholder="닉네임" onChange={onChange}/>
            <button onClick={onReset}>초기화</button>
            <div>
                <b>값: </b>
                이름 (닉네임)
            </div>
        </div>
    );
}

export default InputSample;

これらの値を参考にしてオブジェクトを更新すればいいです.
リアクターのオブジェクトを更新する場合

既存のオブジェクトをコピーする必要があります.

...inputsは、オブジェクトまたは配列を展開できる展開構文です.
https://learnjs.vlpt.us/useful/07-spread-and-rest.html?q=

import React , { useState } from 'react';

function InputSample(){
    const [inputs, setInputs] = useState({
        name:'',
        nickname:'', 
    });
    const {name, nickname} = inputs;

    const onChange = (e)=>{
        const {name, value} = e.target;

        const nextInputs = {
            //spread 문법. 현재 상태의 내용이 이 자리로 온다. 
            ...inputs,
            [name] : value,
        };
        //객체를 새로운 상태로 쓰겠다. 
        setInputs(nextInputs);
    };

    const onReset = ()=>{
        
    };
    
    return (
        <div>
            <input name="name" placeholder="이름" onChange={onChange}/>
            <input name="nickname" placeholder="닉네임" onChange={onChange}/>
            <button onClick={onReset}>초기화</button>
            <div>
                <b>값: </b>
                이름 (닉네임)
            </div>
        </div>
    );
}

export default InputSample;

nextInputsで...Inputsを使用して入力した内容に従って使用し、nameのみをvalueとして上書きします.

const nextInputs = {
            //spread 문법. 현재 상태의 내용이 이 자리로 온다. 
            ...inputs,
            name:value,
        };

これには文字列name自体が含まれます.

[name]:value,

この操作を行うと、name値に基づいて他のキー値が変更されます.
整理する
オブジェクトのステータスを更新する場合は、既存のステータスをコピーしてから、特定の値を上書きし、新しい値を設定する必要があります.これを不変性を保つことと呼ぶ.
これにより、更新が検出され、レンダリングされます.
オブジェクトのステータスを更新する場合は、拡張構文を使用してオブジェクトをコピーし、特定の値を上書きしてステータスを更新します.
これは配列状態を管理する場合も同様であり,不変性を保つが最適化を行う.