Reactで簡単に実装できるラジオボタンの作り方

ReactはUIコンポーネントを簡単に作れるフレームワークです。今回はその中でもフォームのUIコンポーネントであるラジオボタンの作り方を解説します。

ラジオボタンとは

ラジオボタンは、複数の選択肢から1つだけを選ぶことができるUIコンポーネントです。HTMLの<input type=”radio”>要素で実装されます。

Reactでのラジオボタンの実装方法

Reactでラジオボタンを作るためには、状態管理が必要です。ラジオボタンを選択した際に、その値をReactの状態として保持する必要があります。

以下のように、useStateフックを使用して状態を管理します。

import React, { useState } from "react";

function RadioButtons() {
  const [selectedValue, setSelectedValue] = useState("");

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

  return (
    <div>
      <label>
        <input
          type="radio"
          value="option1"
          checked={selectedValue === "option1"}
          onChange={handleChange}
        />
        Option 1
      </label>
      <label>
        <input
          type="radio"
          value="option2"
          checked={selectedValue === "option2"}
          onChange={handleChange}
        />
        Option 2
      </label>
      <label>
        <input
          type="radio"
          value="option3"
          checked={selectedValue === "option3"}
          onChange={handleChange}
        />
        Option 3
      </label>
    </div>
  );
}

export default RadioButtons;

このコードでは、useStateフックを使用してselectedValueという状態を定義し、その初期値を空文字列としています。handleChange関数は、ラジオボタンが選択された際に実行され、その値をselectedValueに設定します。そして、input要素のchecked属性を使用して、選択されたラジオボタンをマークします。

ラジオボタンのデザインをカスタマイズする方法

ラジオボタンのデザインは、ブラウザによって異なります。デザインをカスタマイズするためには、CSSを使用する必要があります。

以下のように、ラジオボタンに適用するCSSを定義します。

input[type="radio"] {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 50%;
  outline: none;
  transition: border-color 0.2s;
}

input[type="radio"]:checked {
  border-color: #61dafb;
}

このCSSでは、ラジオボタンの外観を変更しています。appearanceプロパティをnoneに設定することで、ブラウザのデフォルトの外観を消しています。その後、width、height、border-radius、outline、transitionプロパティを使用して、ラジオボタンの大きさ、形、枠線の色などを変更しています。そして、input[type=”radio”]:checkedセレクタを使用して、選択されたラジオボタンの枠線の色を変更しています。

まとめ

Reactでラジオボタンを作るためには、useStateフックを使用して状態を管理し、input要素のchecked属性を使用して選択されたラジオボタンをマークします。デザインをカスタマイズするためには、CSSを使用します。これらの要素を組み合わせて、簡単に使えるラジオボタンを作ることができます。