【React入門】ラジオボタンで選択されたデータを取得する方法を解説！

2024年7月2日2026年10月18日

※このサイトの記事内では広告を掲載している場合があります。

今回は、Reactでラジオボタンで選択された項目を取得する方法を解説します。

Reactで入力値を取得するには、コンポーネントの状態（state）を使用します。

考え方は、要素が変更されたタイミングでstateの更新を行い、必要なタイミングで対応するstateを取得するといった流れになります。

inputタグの値やform, inputタグでデータの取得をする方法は下記の記事で解説していますので参考にしてください。

参考：【React入門】formやinputタグのテキストを取得する方法を解説！
参考：【React入門】選択ボックスで選択されたデータを取得する方法を解説！

なお、本記事の内容は書籍「これからはじめるReact実践入門」を参考にしています。

リンク

ラジオボタンの実装

ラジオボタンで選択された項目を取得するために、useStateフックを使用して、選択されたラジオボタンの値を管理します。

初期値は空文字列としています。デフォルトを設定したい場合は、ラジオボタンのvalueに対応するidを指定しましょう。

inputタグにtype=”radio”を設定します。この指定により、ラジオボタンとして動作します。

以下はサンプルコードです。


import { useState } from 'react';

root.render(
  <SampleRadio />
);

export default function SampleRadio() {
  const [selectedValue, setSelectedValue] = useState('');

  const handleChange = (event) => {
    setSelectedValue(event.target.value);
  };

  const show = () => {
    alert(`選択項目：${selectedValue}`);
  };

  return (
    <div>
      <label>
        <input
          type="radio"
          value="option1"
          checked={selectedValue === 'option1'}
          onChange={handleChange}
        />
        オプション1
      </label>
      <label>
        <input
          type="radio"
          value="option2"
          checked={selectedValue === 'option2'}
          onChange={handleChange}
        />
        オプション2
      </label>
      <label>
        <input
          type="radio"
          value="option3"
          checked={selectedValue === 'option3'}
          onChange={handleChange}
        />
        オプション3
      </label>
      <p />
     <button type="button" onClick={show}>送信</button>
    </div>
  );
};

checked属性に、selectedValue === ‘option1’のように記述することで、選択された値と比較した結果が属性の値としてそのまま更新されるようにします。

最後に、onChangeイベントハンドラを定義し、ラジオボタンが選択されたときに状態を更新します。event.target.valueで選択された値を取得し、変数の状態を更新します。

サンプルコードでは、ボタンを押下したタイミングで選択されているラジオボタンの項目を取得するようなプログラムとなっています。