複数入力時(React)

レスポンスで複数の入力時のステータスを管理します。

名前、ID、別名を入力するコードがあります.
App.js

import React from "react";

const App = () => {
  return (
    <div>
      <input placeholder="이름" />
      <input placeholder="아이디" />
      <input placeholder="별명" />
      <button>초기화</button>
    </div>
  );
};

export default App;

上図に示すように、3つのInputと1つの初期化ボタンがある場合、以下に示すように、各Inputにstateを作成し、各状態の関数を更新する.

App.js

import React, { useState } from "react";

const App = () => {
  // 각 Input State
  const [name, setName] = useState("");
  const [id, setId] = useState("");
  const [nickname, setNickName] = useState("");

  // 각 State를 업데이트할 함수 3개
  const onChangeName = (e) => {
    const { value } = e.target;
    setName(value);
  };
  const onChangeId = (e) => {
    const { value } = e.target;
    setId(value);
  };
  const onChangeNickName = (e) => {
    const { value } = e.target;
    setNickName(value);
  };

  return (
    <div>
      <input onChange={onChangeName} value={name} placeholder="이름" />
      <input onChange={onChangeId} value={id} placeholder="아이디" />
      <input onChange={onChangeNickName} value={nickname} placeholder="별명" />
      <button>초기화</button>
    </div>
  );
};

export default App;

しかし、上記の方法は非常に非効率です.useStateを3回使用する必要があるため、各Stateを更新するには3つの関数を使用します.

したがって、1つのユーザーステータスでオブジェクトとして情報を管理でき、1回の関数を使用するだけでコードをよりきれいにすることができます.

App.js

import React, { useState } from "react";

const App = () => {
  const [info, setInfo] = useState({
    name: "",
    id: "",
    nickname: "",
  });

  const { name, id, nickname } = info;

  const onChange = (e) => {
    const { name, value } = e.target;
    setInfo({
      ...info,
      [name]: value,
    });
  };

  const onClick = () => {
    setInfo({
      name: "",
      id: "",
      nickname: "",
    });
  };

  return (
    <div>
      <input name="name" onChange={onChange} value={name} placeholder="이름" />
      <input name="id" onChange={onChange} value={id} placeholder="아이디" />
      <input name="nickname" onChange={onChange} value={nickname} placeholder="별명" />
      <button onClick={onClick}>초기화</button>
    </div>
  );
};

export default App;

const { name, id, nickname } = info;ES 6に追加された非構造化割当てによって値が抽出される.

...infoは、展開構文を使用してinfoオブジェクトを展開し、オブジェクトをコピーします.

[name]:valueで[]を使用するのは、オブジェクトのキー値を動的に割り当てるためです.[name]はnameの変数を読み込みます.

間違いがあったらコメントで教えてください!
参考資料:超現代反応