#Reactのinput

InputSample.js処理による反応
-下部の値(入力値に依存):Comment...自動変更-

console.log(e.target)のためにブラウザに値を入力すると、コンソールウィンドウに
console.ログが入力されました

「初期化をクリック」機能を実装する前に、入力時にvalueを入力すると機能が完了します.
inputにvalue={text}がない場合、初期化ボタンがアクティブな場合、inputの値は初期化されません.
クリックボタンイベントにonRset関数を入れて初期化機能を有効にする

#複数入力

上のinput状態管理コードを整理して複数のinputを準備する
                                                       [ブラウザで実装されるApp.js]

                                                       [複数入力を入れる前の状態]

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;

    //기존의 객체 복사 작업
    setInputs({
      ...inputs,
      //... : spread 연산자 문법
      /*
       const [inputs, setInputs] = useState({
        name: "",
        nickname: ""
      });내용이 ...inputs 담기
     */
    [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>
  );
}

export default InputSample;

[最終コード]