Reactで入力フォームを使うときの基本まとめ

Reactで入力フォームを使うときの基本について、簡単にまとめました。

大まかな流れ

1. Stateを用意
2. 入力イベントの紐付け
3. ボタンやフォーム送信イベントを設定
4. クリアボタンの追加やリセット機能
5. バリデーションの追加

Stateを用意

Reactでは、フォームの入力内容をuseStateで状態を管理している

基本のコード例

import React, { useState } from "react";

const Example = () => {
  const [text, setText] = useState(""); // 入力値を管理する状態

  const handleChange = (e) => {
    setText(e.target.value); // 入力値を状態に反映
  };

  return (
    <div>
      <input
        type="text"
        value={text}
        onChange={handleChange}
        placeholder="ここに入力"
      />
      <p>あなたの入力: {text}</p>
    </div>
  );
};

export default Example;

• useStateの使い方
  • useState("")で初期値を空文字に設定
  • textは現在の入力値
  • setTextでtextを更新
• 動き
  • 入力が変わると、handleChangeが呼ばれる
  • 新しい値がtextに保存され、画面に反映される

入力イベントの紐付け

onChange

• onChangeは、フォームの内容が変わったときに実行される「イベント」のこと
• 文字を入力したり、選択肢を選んだりするとonChangeが動く

基本の仕組み

<input
  type="text" // テキスト入力欄
  value={value} // 入力欄に表示する値を設定
  onChange={(e) => setValue(e.target.value)} // 入力が変わるたびに状態を更新
/>

• value: 入力欄に表示される内容
• onChange: 入力内容が変わるたびに呼び出される関数
• e.target.value: 入力された値を取得する

e.target.value

e.target.valueはフォームに入力された内容（値）を取得する方法

• eって何？

  • eは「イベントオブジェクト」
  • Reactでは、入力やクリックなどのイベントが発生すると、自動的にこのeが関数に渡される

• e.targetって何？

  • e.targetは、イベントが発生した要素（HTML要素）を指す
  • たとえば、<input>で文字を入力した場合、e.targetはその<input>要素

• e.target.valueって何？

  • e.target.valueは、<input>の現在の値（ユーザーが入力した文字）を取得する

図解

<input type="text" value="React" />

• ユーザーが「React」と入力している場合、
  • e.target: <input>要素そのもの
  • e.target.value: "React"

---

e.target.valueの使い方

const handleChange = (e) => {
  console.log(e.target.value); // 入力された値をコンソールに表示
};

<input
  type="text"
  onChange={handleChange} // 入力が変わるたびにhandleChangeを実行
/>

• 入力欄に「こんにちは」と入力したら、コンソールに「こんにちは」と表示される

コード例

import React, { useState } from "react";

const Greeting = () => {
  const [name, setName] = useState("");

  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="名前を入力してください"
      />
      <p>こんにちは、{name}さん！</p>
    </div>
  );
};

export default Greeting;

• 入力した名前がそのまま表示される
• onChange={(e) => setName(e.target.value)}で、入力内容を状態に保存

ポイントまとめ

1. valueとonChangeはセットで使う

   • valueで表示する内容を設定
   • onChangeで入力内容を状態に保存

2. e.target.valueを使う

   • 入力された値を取得するには、e.target.valueを使う

3. 状態（useState）で値を管理する

   • 入力内容は必ずuseState