Reactでのラジオボタンの扱い

ラジオボタン radioの扱いは、例えばチェックボックスとは少し異なります。 問題は、複数のラジオボタンが同じ状態（ステート）を持つ一方で、 異なるvalueを持つことです。

したがって、以下のように作業を進めます： 各ラジオボタンのvalue属性に独自の値を設定し、 checked属性には、ステートが特定の値と等しいかどうかを チェックする特別な条件を設定します。等しい場合、そのラジオボタンは チェックされた状態になり、等しくない場合はチェックされない状態になります。

以下に説明した内容の実装例を示します：

jsxfunction App() {
  const [value, setValue] = useState(1);
  
  function changeHandler(event) {
    setValue(event.target.value);
  }
  
  return <div>
    <input
      type="radio"
      name="radio"
      value="1"
      checked={value === '1' ? true : false}
      onChange={changeHandler}
    />
    <input
      type="radio"
      name="radio"
      value="2"
      checked={value === '2' ? true : false}
      onChange={changeHandler}
    />
    <input
      type="radio"
      name="radio"
      value="3"
      checked={value === '3' ? true : false}
      onChange={changeHandler}
    />
  </div>
}