React Forms - Radio

1. Radio (ラジオボタン)

ラジオボタンは通常、複数の選択肢の中から1つだけを選択できるグループとして利用されます。

同一グループ内のすべてのラジオボタンは、共通の name 属性を共有する必要があります。
Reactにおけるラジオボタンの制御は、各ラジオボタンの value 属性が、ステート（state）に保持されている現在の値と一致するかどうかを判定することで行います。

1.1 実装例

Reactでは、ラジオボタンの状態を管理するために checked 属性を使用します。

import { useState } from 'react';
import { createRoot } from 'react-dom/client';

function MyForm() {
  // 初期値を 'banana' に設定
  const [selectedFruit, setSelectedFruit] = useState('banana');

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

  const handleSubmit = (event) => {
    alert(`あなたの好きなフルーツは: ${selectedFruit}`);
    event.preventDefault();
  };

  return (
    <form onSubmit={handleSubmit}>
      <p>お好きなフルーツを選択してください:</p>
      <label>
        <input 
          type="radio" 
          name="fruit" 
          value="apple" 
          checked={selectedFruit === 'apple'} 
          onChange={handleChange} 
        /> りんご
      </label>
      <br />
      <label>
        <input 
          type="radio" 
          name="fruit" 
          value="banana" 
          checked={selectedFruit === 'banana'} 
          onChange={handleChange} 
        /> バナナ
      </label>
      <br />
      <label>
        <input 
          type="radio" 
          name="fruit" 
          value="cherry" 
          checked={selectedFruit === 'cherry'} 
          onChange={handleChange} 
        /> さくらんぼ
      </label>
      <br />
      <button type="submit">送信</button>
    </form>
  );
}

createRoot(document.getElementById('root')).render(
  <MyForm />
);