複数入力の制御

前回inputテキスト入力を制御しました.
では、入力が複数ある場合、どうすればいいのでしょうか.

return (
        <div>
            <input placeholder="이름"  />
            <input placeholder="닉네임"  />
            <button onClick={onReset}>초기화</button>

            <div>
                <b>값:</b>
                이름 (닉네임)
                
            </div>
        </div>
    )

はい、このように名前とニックネームを入力するinputは単独で存在し、inputに入力するテキストは次の値に出力されます.[初期化](Initialization)をクリックして、すべての入力テキストを初期化するコードを実装します.
以前は1つのinputしかなく、onReset()を実現する際に{text}を初期化していたが、今回は2つの値{text}が存在するため、同じように実現することはできなかった.
異なるテキスト値を指定してonChange関数を別々に作成するだけでいいのでしょうか?
いいですが、もっと効果的な方法を使ったほうがいいです.
テキストや数値の単一制御ではなくオブジェクトを制御している場合は、以前に学習したusState?複数のデータを制御できるはずです.
次に、オブジェクトを制御することでusStateを記述できます.const [inputs, setInputs] = useState({ name: '', nickname:'', });inputsという名前の状態が作成され、初期値がname=「,ニックネーム=」であり、setInputsを使用してinputsの値を制御することを示します.
次に、非構造的な割り当てを使用します.const {name, nickname} = inputsと書き、nameとニックネーム変数を簡単に表す.
続行する前に、次のコードを実行します.

import React, {useState}from "react";

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;

Inputウィンドウにテキストを入力すると、テキストの内容とinputのname値がコンソールウィンドウに同時に出力されます.

続けて書きたくない場合は、これまで学んだ非構造的な割り当てを利用することができます.e.targetはこのように記述される.
従来はconst {name, value} = e.target;を実施した場合、setText()のみを用いて変化を制御していたが、今回は複数の入力であるため、そうすることはできなかった.
新しいオブジェクトを設定して、その値を元のオブジェクトの値に変更します.
さあ.こう書くとわかりません.実習に行きましょう.

const onChange = (e) => {
        const {name, value} = e.target;
        const nextInputs = {
            ...inputs,
            [name]: value, //e.target의 name과 value이다.
        };

       setInputs(nextInputs)
    }

まず、e.target.valueというオブジェクトを定義し、このオブジェクトは、nextInputsによって作成されたusestate()のstateのオブジェクト形態をそのままインポートすることを意味する.
さらに、inputsは、[name]: valueの価格に従ってinputを得る.
次に、これらの値を反映するオブジェクトを既存のオブジェクトに置き換えます.name(=e.target.name)そうですvalue(=e.target.value)は、setInputs(nextInputs)の値を空白に変更することができる.

    const onReset = () => {
        setInputs({
            name: '',
            nickname:'',
        })
    }

各inputに値を指定することを忘れないでください.実施後の最終結果は以下の通りです.

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 = {
            ...inputs,
            [name]: value, //e.target의 name과 value이다.
        };

       setInputs(nextInputs)
    }

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

            <div>
                <b>값:</b>
            {name} {nickname}
                
            </div>
        </div>
    )
}


export default InputSample;

※?
USStateでsetInputs関数を元のオブジェクトの値に変更すると、より簡単ではないでしょうか.しかし、なぜ新しいオブジェクトを作って入れなければならないのでしょうか.
この疑問に対する答えは「あなたの考え通りにすればレンダリングできない」です.
反応器が素子をレンダリングする過程を見てみましょう.

setState(または親からサポートを受ける)

を呼び出す

shouldComponentUpdateを実行し、falseを返してここで停止し、trueを返して次の

に進みます.

仮想DOMを実際のDOMと比較し、変更があれば画面

を再描画する.
決定的な要因は2番だ.
shouldComponentUpdateメソッドデフォルトのstate値と
新しい値が同じ場合はfalse値を返します.
例を挙げる.2つの状態を比較するとします.

const array = [1,2,3,4];
const sameArray = array;
sameArray.push(5);

console.log(array !== sameArray); // false

const array = [1,2,3,4];
const differentArray = [...array, 5];
console.log(array !== differentArray); // true

最初のコードの配列とsameArray変数が参照する配列のアドレス値は同じです.ただし、2番目のコードの各配列には異なる参照値があるため、比較すると異なる結果が得られます.
このように、一度に創造された値は変えられない、不変性と呼ばれています.
このように、不変性を維持してコードを記述する場合は、各オブジェクトの値ではなく、各オブジェクトの参照値を比較するだけです.
したがって、state onReset()をinputsで定義した場合、inputsのみをインポートして値を変更すると、同じReferenceを持つため、setInputsにfalse値が表示され、レンダリングされません.
参考資料
https://github.com/BKJang/dev-tips/issues/42
不変オブジェクト？不変性?あれはいったい何なの?!