ラジオボタンの制御

ラジオボタンの値は、useState を用いて状態として管理し、onChange イベントを通して制御します。

import { useState } from "react";

export const ControlledRadio = () => {
  const [selected, setSelected] = useState("apple");

  const handleChange = (e: React.ChangeEvent
<HTMLInputElement>) => {
    setSelected(e.target.value);
  };

  return (

<div>

<label>
        <input
          type="radio"
          name="fruit"
          value="apple"
          checked={selected === "apple"}
          onChange={handleChange}
        />
        りんご
      </label>

<label>
        <input
          type="radio"
          name="fruit"
          value="orange"
          checked={selected === "orange"}
          onChange={handleChange}
        />
        オレンジ
      </label>

<label>
        <input
          type="radio"
          name="fruit"
          value="banana"
          checked={selected === "banana"}
          onChange={handleChange}
        />
        バナナ
      </label>

<p>選択された果物: {selected}</p>
    </div>
  );
};

• value 属性で値を固定し、checked に状態と一致しているかを判定。
• onChange で選択された値を state に保存。