問題一覧に戻る
初級イベント処理
問題30: onChangeイベント

入力フィールドの変更を監視し、フォーム要素を制御します。テキスト、数値、チェックボックスの扱い方を学びます。

import React, { useState } from 'react';

function Form() {
  const [text, setText] = useState("");
  const [on, setOn] = useState(false);

  return (
    <div>
      {/* テキスト入力 */}
      <input value={text} ={(e) => setText(e.target.)} />
      
      {/* チェックボックス */}
      <label>
        <input type="checkbox" checked={on} onChange={(e) => setOn(e.target.)} />
        {on ? "ON" : "OFF"}
      </label>
      
      <p>{text}</p>
    </div>
  );
}

export default Form;
···