1. Reactのフォーム処理とは何か

Reactのフォーム処理とは、文字入力やチェックボックス、ボタンなど、画面に入力された内容をプログラムで管理する仕組みのことです。普通のHTMLでは、ブラウザが自動で入力内容を覚えていますが、Reactでは「状態」と呼ばれる仕組みで入力値を管理します。

状態とは、アプリの中で一時的に覚えておきたい情報のことです。ノートにメモを書くようなイメージで、入力された文字を変数として保存していると考えると分かりやすいです。

2. useStateを使った基本的な入力管理

Reactでは、useStateという機能を使ってフォームの入力値を管理します。 useStateは「今の値」と「値を変更するための道具」をセットで用意してくれます。


import React, { useState } from "react";

function App() {
  const [name, setName] = useState("");

  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <p>入力された名前：{name}</p>
    </div>
  );
}

export default App;

（文字を入力すると、その内容がすぐ下に表示されます）

3. リセット処理の基本的な考え方

フォーム入力値を初期化するとは、状態を最初の値に戻すことです。先ほどの例では、nameの初期値は空の文字でした。つまり、setNameに空の文字を渡せば、入力欄は空に戻ります。

これは、消しゴムでノートの文字を消すような感覚です。入力欄そのものを直接消すのではなく、裏で管理している状態を書き換えています。

4. ボタンを押して入力内容をリセットする方法

次は、リセットボタンを押すと入力内容が消える例です。フォームのやり直しや、入力ミスを修正したいときによく使われます。


import React, { useState } from "react";

function App() {
  const [email, setEmail] = useState("");

  const resetForm = () => {
    setEmail("");
  };

  return (
    <div>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <button onClick={resetForm}>リセット</button>
    </div>
  );
}

export default App;

（文字を入力してリセットボタンを押すと、入力欄が空になります）

5. 複数の入力項目をまとめて初期化する方法

実際のフォームでは、名前やメールアドレスなど、複数の入力欄を使うことが多いです。その場合でも、考え方は同じで、それぞれの状態を初期値に戻します。


import React, { useState } from "react";

function App() {
  const [name, setName] = useState("");
  const [age, setAge] = useState("");

  const resetForm = () => {
    setName("");
    setAge("");
  };

  return (
    <div>
      <input
        type="text"
        placeholder="名前"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <input
        type="number"
        placeholder="年齢"
        value={age}
        onChange={(e) => setAge(e.target.value)}
      />
      <button onClick={resetForm}>全てリセット</button>
    </div>
  );
}

export default App;

（2つの入力欄が同時に空になります）

6. フォーム送信後に自動でリセットする方法

フォームを送信したあとに、自動で入力内容を消したい場面も多いです。この場合は、送信処理の最後でリセット処理を行います。


import React, { useState } from "react";

function App() {
  const [message, setMessage] = useState("");

  const handleSubmit = () => {
    alert(message);
    setMessage("");
  };

  return (
    <div>
      <textarea
        value={message}
        onChange={(e) => setMessage(e.target.value)}
      />
      <button onClick={handleSubmit}>送信</button>
    </div>
  );
}

export default App;

（送信後、入力欄が自動で空になります）