問題一覧に戻る
中級フォーム処理
問題47: チェックボックス

真偽値を扱うチェックボックスの実装を学びます。checkedプロパティでチェック状態を制御し、onChangeイベントでe.target.checkedから値を取得します。チェックボックスは利用規約への同意、オプション機能の有効化、複数選択など様々な場面で使用されます。条件付きレンダリングと組み合わせることで、チェック状態に応じたUIの変更も可能です。アクセシビリティのためlabelタグとの併用も重要です。

import React, { useState } from 'react';

function Checkbox() {
  const [agree, setAgree] = useState(false);

  return (
    <div>
      <label>
        {/* チェックボックスを制御 */}
        <input
          type=""
          ={agree}
          ={(e) => setAgree(e.target.checked)}
        />
        利用規約に同意
      </label>
      {/* 条件付きボタン */}
      <button ={!agree}>送信</button>
    </div>
  );
}

export default Checkbox;
···