本記事では、Reactで選択されたラジオボタンのvalue属性の値を取得(判定)する方法についてサンプルコードを用いて解説しています。
Reactの学習におすすめ書籍
モダンJavaScriptの基本から始める React実践の教科書
メリット
- JavaScriptの基礎から始めてReactの機能を一通り学べる
- 実務で必要となる知識を意識しながら学習を進められる
- 現場のシチュエーションベースのストーリーで技術解説
楽天ブックス
¥2,860 （2024/04/15 22:53時点 | 楽天市場調べ）
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
全プログラマー必見！
変数名/関数名にもう悩まない！
変数名/関数名にもう悩まない！
リーダブルコード
メリット
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 （2023/07/23 02:48時点 | Amazon調べ）
ポチップ
目次
サンプルコード
選択されたラジオボタンのvalue属性の値を取得するサンプルコードを用意しました。注目して欲しいポイントをコメントアウトに書いているので、そこを重点的に解説していきます。
import { useState } from "react";
function App() {
const RADIO_VALUES = ["A", "B", "C"];
// 注目ポイント②
const [selectedRadioBtnValue, setSelectedRadioBtnValue] = useState("");
// 注目ポイント③
const onRadioBtnChanged = (e) => setSelectedRadioBtnValue(e.target.value);
return (
<>
<p>選択されたラジオボタン：{selectedRadioBtnValue}</p>
{/* 注目ポイント① */}
{RADIO_VALUES.map((radioValue) => (
<label key={radioValue}>
<input
type="radio"
value={radioValue}
name="sample"
onChange={onRadioBtnChanged}
/>
{radioValue}
</label>
))}
</>
);
}
export default App;注目ポイント①：ラジオボタンの生成
{RADIO_VALUES.map((radioValue) => (
<label key={radioValue}>
<input
type="radio"
value={radioValue}
name="sample"
onChange={onRadioBtnChanged}
/>
{radioValue}
</label>
))}注目ポイントの1つ目は、ラジオボタンの生成です。value属性にセットする値を配列で用意しmapメソッドで展開します。
注目ポイント②：選択されたラジオボタンの値
const [selectedRadioBtnValue, setSelectedRadioBtnValue] = useState("");注目ポイントの2つ目は、選択されたラジオボタンのvalue属性の値を代入する変数をuseStateで生成します。これは、おまけで解説する初期設定で特定のラジオボタンにチェックを入れる時にも使用します。
注目ポイント③：選択されたラジオボタンの値
const onRadioBtnChanged = (e) => setSelectedRadioBtnValue(e.target.value);注目ポイントの3つ目は、選択されたラジオボタンのvalue属性の値をuseStateで渡された更新用の関数を使用し変数に代入します。引数eに対してtarget.valueを指定することでチェックされたラジオボタンのvalue属性の値を取得することが出来ます。
おまけ：特定のラジオボタンにチェックを入れた状態にする
先ほど紹介したサンプルコードは、最初は何も選択されていない状態です。これを特定のラジオボタンにチェックを入れた状態から始めたい場合は、以下のようにコードを書き替えます。
import { useState } from "react";
function App() {
const RADIO_VALUES = ["A", "B", "C"];
// 変更点①
const [selectedRadioBtnValue, setSelectedRadioBtnValue] = useState("B");
const onRadioBtnChanged = (e) => setSelectedRadioBtnValue(e.target.value);
return (
<>
<p>選択されたラジオボタン：{selectedRadioBtnValue}</p>
{RADIO_VALUES.map((radioValue) => (
<label key={radioValue}>
<input
type="radio"
value={radioValue}
name="sample"
onChange={onRadioBtnChanged}
// 変更点②
checked={radioValue === selectedRadioBtnValue}
/>
{radioValue}
</label>
))}
</>
);
}
export default App;書き換えた箇所と理由
- useStateの初期値にチェックを入れた状態にしたいラジオボタンのvalue属性の値をセット
- checked属性の値にuseStateの初期値が代入された変数 === mapメソッドで展開されたvalue属性の値を比較するとuseStateの初期値に設定したラジオボタンのみtrueがセットされる
