1. ラジオボタンとはどんな入力方法か

ラジオボタンは、いくつかの選択肢の中から一つだけを選ぶ入力方法です。性別の選択や支払い方法の選択などで、丸いボタンを見たことがあると思います。一度選ぶと、他を選んだ瞬間に前の選択は外れます。この「一つだけ」という特徴が、Reactで管理するときの大事なポイントになります。

2. Reactのフォーム処理と状態管理の考え方

Reactでは、入力された内容をそのまま使うのではなく、状態という仕組みで管理します。状態とは、今の選択結果をメモしておく箱のようなものです。ラジオボタンの場合は、「どの項目が選ばれているか」を文字で覚えておくことが多いです。これにより、画面とデータが常に同じ内容になります。

3. useStateでラジオボタンを管理する基本

ReactではuseStateを使って状態を作ります。難しい言葉に見えますが、「覚えておく場所を用意する」と考えてください。ラジオボタンが選ばれたら、その内容を書き換えます。


import React, { useState } from "react";

function App() {
  const [gender, setGender] = useState("");

  return (
    <div>
      <label>
        <input
          type="radio"
          name="gender"
          value="男性"
          checked={gender === "男性"}
          onChange={(e) => setGender(e.target.value)}
        />
        男性
      </label>
      <label>
        <input
          type="radio"
          name="gender"
          value="女性"
          checked={gender === "女性"}
          onChange={(e) => setGender(e.target.value)}
        />
        女性
      </label>
    </div>
  );
}

export default App;

（選択したラジオボタンだけがオンになります）

4. 選択結果を文字で表示してみよう

状態に保存した選択結果は、画面に表示できます。これは、アンケート用紙に丸を付けて、その結果を読み上げるようなイメージです。今どれが選ばれているかが、すぐに確認できます。


import React, { useState } from "react";

function App() {
  const [color, setColor] = useState("");

  return (
    <div>
      <label>
        <input
          type="radio"
          name="color"
          value="赤"
          onChange={(e) => setColor(e.target.value)}
        />
        赤
      </label>
      <label>
        <input
          type="radio"
          name="color"
          value="青"
          onChange={(e) => setColor(e.target.value)}
        />
        青
      </label>
      <p>選択中：{color}</p>
    </div>
  );
}

export default App;

（選んだ色が文字で表示されます）

5. 初期値を設定する方法

最初から一つ選ばれた状態にしたい場合もあります。その場合は、状態の最初の値を設定します。あらかじめ丸が付いているアンケート用紙と同じ考え方です。


import React, { useState } from "react";

function App() {
  const [payment, setPayment] = useState("現金");

  return (
    <div>
      <label>
        <input
          type="radio"
          name="pay"
          value="現金"
          checked={payment === "現金"}
          onChange={(e) => setPayment(e.target.value)}
        />
        現金
      </label>
      <label>
        <input
          type="radio"
          name="pay"
          value="カード"
          checked={payment === "カード"}
          onChange={(e) => setPayment(e.target.value)}
        />
        カード
      </label>
    </div>
  );
}

export default App;

（最初から「現金」が選択されています）