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

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

今回は、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>
  );
};