React onChangeイベント

成果物

プログラム概要

• App.js:メインの処理を記述するプログラム
• index.js:AppコンポーネントをDOMに変換し、HTMLにレンダリングする
• Styles.css:デザイン

onChange

onChangeイベントは、フォーム内のエレメント（要素）である、input、select、textareaの値がユーザーの操作によって変更された際に発生するイベントです。

コード

index.js

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

App.js

// useStateをApp.jsで利用できるようインポートする
import React, { useState } from "react";
import "./styles.css";

// 他のファイルでも使用できるようAppコンポーネントをエクスポートする
export default function App() {

  // inputから入力された値（姓）の状態を管理する
  const [firstName, setFirstName] = useState("");

  // inputから入力された値（名）の状態を管理する
  const [lastName, setLastName] = useState("");

  // inputタグで入力された姓の値(value)を受け取り、setFirstName関数にセットする
  // 引数eに受け渡される値を確認するために　※1　を確認
  const firstNameChange = (e) => setFirstName(e.target.value);
  const lastNameChange = (e) => setLastName(e.target.value);

  // リセットボタンが押された場合、姓名に入力された内容をクリアする
  const resetName = () => {
    setFirstName("");
    setLastName("");
  };

  return (
    <>
      // 値が入力されるとfirstNameChange関数が実行される
      <input
        type="text"
        value={firstName}
        onChange={firstNameChange}
        placeholder="姓"
      />

      // 値が入力されるとlastNameChange関数が実行される
      <input
        type="text"
        value={lastName}
        onChange={lastNameChange}
        placeholder="名"
      />

      // useStateに保持されているfirstName, lastNameの値を表示する
      <p>
        私の名前は{firstName} {lastName} です
      </p>

      // ボタンが押されるとresetName関数が実行される
      <button onClick={resetName}>リセット</button>
    </>
  );
}

※1

  // 省略
  const lastNameChange = (e) => setLastName(e.target.value);
  // 省略
  <input
      type="text"
      value={lastName}
      onChange={lastNameChange}
      placeholder="名"
  />

上記のinputからlastNameChange関数に渡された引数eの中身を確認すると以下のようになっている。
ここで、setLastNameにはe.target.valueが渡されているが、下記を確認するとe.target.valueには太郎が渡されていることがわかる。
つまりe.target.valueにはinputに入力された値(value)が入っていることが分かる

SyntheticBaseEvent {_reactName: "onChange", _targetInst: null, type
: "change", nativeEvent: InputEvent, target: HTMLInputElement…}
_reactName: "onChange"
_targetInst: null
type: "change"
nativeEvent: InputEvent
target: 
<input type="text" placeholder="名" value="太郎"></input>
currentTarget: null
eventPhase: 3
bubbles: true
cancelable: false
timeStamp: 151516.59999999963
defaultPrevented: false
isTrusted: true
isDefaultPrevented: ƒ functionThatReturnsFalse() {}
isPropagationStopped: ƒ functionThatReturnsFalse() {}
preventDefault: ƒ preventDefault() {}
stopPropagation: ƒ stopPropagation() {}
persist: ƒ persist() {}
isPersistent: ƒ functionThatReturnsTrue() {}
<constructor>: "SyntheticBaseEvent"

styles.css

input {
  display: block;
}