React ラジオボタンの実装

成果物

今回はラジオボタンを用いて性別を選択する簡単なプログラムを作成しました。

コード

index.js

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

App.js

import React, { useState } from "react";
import "./styles.css";

// ラジオボタンにセットしたい項目の配列itemsを設定
const items = [
  { id: 1, item: "男性" },
  { id: 2, item: "女性" },
  { id: 3, item: "どちらでもない" },
  { id: 4, item: "選択しない" }
];

// props(値)を受け取らない場合、const RadioButtonItems = items.map((item) => { return (...)})
// 親コンポーネントInputRadioからprops(handleChange, checkedValue)を受け取る
const RadioButtonItems = (props) =>

  // map()で配列itemsから要素を1つずつ取り出し、値を設定する
  items.map((item) => {
    return (

      // key属性にitem.idを設定する
      <label key={item.id}>
        <input
          type="radio"

          // value属性に取り出した要素のitemを設定する
          value={item.item}

          // ラジオボタンが押された際に、関数handleChangeが実行される
          // ラジオボタンが押された際に、状態変数checkedValueの値が更新される
          // その際にcheckedValueに設定される値は、押されたラジオボタンのvalue属性
          onChange={props.handleChange}

          // checked属性を指定されたラジオボタンが初期状態でチェックされた状態になります
          // props.checkedValueの初期値はitems[0].itemなので「男性」になります
          // よって最初にチェックされているラジオボタンは「男性」になります
          // この状態でchecked属性を取り除くと全て選択できるラジオボタンができてしまうのでcheckedは必須です
          // ラジオボタンの初期値を設定したくない場合、
          // name属性を追加することで初期値を設定せず、通常のラジオボタンの挙動になります
          checked={props.checkedValue === item.item}
        />
        {item.item}
      </label>
    );
  });

const InputRadio = () => {
  
  // 選択されたラジオボタンの状態checkedValue
  // ラジオボタンの状態を更新するsetCheckedValue
  // 初期値はitems[0].item = 男性  
  const [checkedValue, setCheckedValue] = useState(items[0].item);

  // ラジオボタンが押された際に実行される
  // 押されたラジオボタンのvalue属性の値を取得
  const handleChange = (e) => setCheckedValue(e.target.value);

  return (
    <div className="App">
      <p>
        性別を選択してください:<b>{checkedValue}</b>
      </p>
      
      // 子コンポーネントRadioButtonItemsにhandleChange, checkedValueを渡す
      <RadioButtonItems
        handleChange={handleChange}
        checkedValue={checkedValue}
      />
    </div>
  );
};

export default function App() {
  return <InputRadio />;
}

styles.css

label {
  display: block;
}