複数入力時(React)

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

import React from "react";

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

export default App;

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;

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;