Ceeds Academy教材アプリ教材・症状語・タグで検索
索引グラフ試す
アプリFW/ライブラリ▸React

React: イベントとフォーム

hands-on所要 25分最新草稿
前提: React: props と state(useState)→次: React: データ取得(useEffect・読込/成功/失敗の3状態)
意味グラフ(この教材と内容的に近い教材・1ネスト)
例え(Analogies)
イベント=呼び鈴に応える

onClickやonChangeは「呼び鈴が鳴ったら応える」仕組み。フォームの制御コンポーネントは「入力を常に手元で把握しておく」感覚。

概要

📍 app-frameworks ▸ React ▸ イベントとフォーム | 種別: hands-on | facts_as_of 2026-06(React 19)

公式ドキュメント — hands-on

🎞 スライド

イベントとフォーム

制御コンポーネント(テキスト図)

[input] ──onChange──▶ setState ──value──▶ [input]
入力 state を更新 state を表示
=画面の値と state が常に一致

ポイント

  • onClick / onChange / onSubmit でイベント処理
  • value は state で管理(制御コンポーネント)
  • e.preventDefault() で送信時のリロードを防ぐ
—
出典(sources)

react.dev (Responding to Events / Forms) ; React 19 / 2026-06確認

確認問題(Review-Questions)
制御コンポーネントのinputに必要な2つの属性は?コード
基礎公式
解答・解説▾ 開く

value(stateの値)と onChange(stateを更新)。

フォーム送信でページをリロードさせないには?択一
基礎公式
解答・解説▾ 開く

onSubmitで e.preventDefault() を呼ぶ。

目次
例え概要公式ドキュメント出典確認問題
鮮度
最新
更新: 2026-06-15
次回棚卸し: 2026-12-15
周期: 6か月
版: React 19

概要

クリック等のイベント処理と、フォーム入力を扱う。入力値を state で管理する制御コンポーネントが基本。

公式ドキュメント準拠(React 19)

function NameForm() {
  const [text, setText] = useState("");
  const onSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    console.log(text);
  };
  return (
    <form onSubmit={onSubmit}>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <button type="submit">送信</button>
    </form>
  );
}
  • onClick / onChange / onSubmit。制御コンポーネント=valueをstateで管理。e.preventDefault() でリロード防止。

出典: react.dev: Responding to Events

🧭 誤解訂正集

よくある誤解 正しい理解
value だけ付ければ入力できる value と onChange の両方を結ぶ(制御コンポーネント)
送信でページがリロードされるのが普通 e.preventDefault() でリロードを防ぐ

📖 用語

  • イベントハンドラ … クリック等に反応する関数(onClick 等)。
  • 制御コンポーネント … 入力 value を state で管理する入力欄。
  • onChange / onSubmit … 入力変化/フォーム送信のイベント。
  • preventDefault … 既定動作(送信でのリロード等)を止める。

✅ 確認の目安(can-do)

イベント処理と制御コンポーネント(value+onChange)を説明でき、**「なぜ入力できない/なぜリロードされるか」**を切り分けて直せる。

⚠️ エラー復旧集

症状 原因 復旧
入力できない valueのみでonChange無し valueとonChangeの両方を結ぶ
送信でリロードされる preventDefault無し e.preventDefault() を呼ぶ