Reactでラジオボタンを実装する方法

1.単一コンポーネントでラジオボタンを作成する

useState Hookを使用して、選択されたオプションを状態として管理

import React, { useState } from "react";

function RadioButton() {
  const [selectedOption, setSelectedOption] = useState("");

  const handleOptionChange = (event) => {
    setSelectedOption(event.target.value);
  };

  return (
    <div>
      <label>
        <input
          type="radio"
          value="option1"
          checked={selectedOption === "option1"}
          onChange={handleOptionChange}
        />
        Option 1
      </label>

      <label>
        <input
          type="radio"
          value="option2"
          checked={selectedOption === "option2"}
          onChange={handleOptionChange}
        />
        Option 2
      </label>
    </div>
  );
}

2.複数コンポーネントでラジオボタンを作成する

Appコンポーネントが選択されたオプションを状態として管理し、ラジオボタングループの選択されたオプションとその変更を扱うために、propsとコールバック関数を使用

import React, { useState } from "react";

function RadioButtonGroup({ options, selectedOption, onChange }) {
  return (
    <div>
      {options.map((option) => (
        <label key={option}>
          <input
            type="radio"
            value={option}
            checked={selectedOption === option}
            onChange={onChange}
          />
          {option}
        </label>
      ))}
    </div>
  );
}

function App() {
  const [selectedOption, setSelectedOption] = useState("");
  const options = ["Option 1", "Option 2", "Option 3"];

  const handleOptionChange = (event) => {
    setSelectedOption(event.target.value);
  };

  return (
    <div>
      <RadioButtonGroup
        options={options}
        selectedOption={selectedOption}
        onChange={handleOptionChange}
      />
    </div>
  );
}