ベロフォードの「複数のInputステータス管理」コースを学びます.

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

  const { name, nickname } = inputs; // 비구조화 할당을 통해 값 추출

  const onChange = (e) => {
    const { value, name } = e.target; // 우선 e.target 에서 name 과 value 를 추출
    setInputs({
      ...inputs, // 기존의 input 객체를 복사한 뒤
      [name]: value // name 키를 가진 값을 value 로 설정
    });
  };

  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>
  );

誰が開発しても、複数のInputタグを管理する場合があります.今私が担当している掲示板、電子承認、ドライブ、アクションアイテムなどのすべてのコンポーネントにinputがあります.
これまで、このinputのstateとe.targetを担当する複数のinputを作成しました.valueを受け入れて別々に入れる関数を書きましたが、データがもったいないです.

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

  const { name, nickname } = inputs; // 비구조화 할당을 통해 값 추출

userStateの初期値はオブジェクトで、nameとニックネームはキーで、値は空の文字列です.
inputsオブジェクトを非構造化割り当てによりnameとニックネームstateを抽出し、jsx文に格納します.

  const onChange = (e) => {
    const { value, name } = e.target; // 우선 e.target 에서 name 과 value 를 추출
    setInputs({
      ...inputs, // 기존의 input 객체를 복사한 뒤
      [name]: value // name 키를 가진 값을 value 로 설정
    });
  };

この部分は本当に難しいです.まず、この関数を使用するHTMLタグを見てみましょう.

  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>
  );

パラメータとしてeventを受信します.event.target.value, event.target.それぞれnameを抽出します.
e.target.nameをコンソールに印刷すると、各InputeでonChangeアクティビティを実行するときにnameまたはニックネームが印刷されます.

    setInputs({
      ...inputs, // 기존의 input 객체를 복사한 뒤
      [name]: value // name 키를 가진 값을 value 로 설정
    });

理由を表す既存のオブジェクトに触ってはいけません...入力がなければ、入力は交代で打つことはできません.どうしたんですか.onChange e.targetでvalueが受信されるたびに値がvalueとして保存され、再び別のinputラベルをクリックすると、「空の文字列」という初期値が返されます.inputには文字列が保持されますが、setStateは使用できませんので、何の役にも立たないです.
ほほほ.
では.

[name]: value 이건 도대체 뭐냐?

では、この例を見てみましょう.

これなら{MickeyMous:Happy}が出るのが普通じゃないですか?

???????

ほほほ.わかりません.難しいですね.
さあ.これからは、オブジェクトに鍵を割り当てたいなら、空の配列で包んで幸せにしましょう.