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

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

Reactでラジオボタンの処理を実装するには、以下のような例が考えられます。
TypeScriptを使用した例になります。

RadioButtonComponent.tsx

import React, { useState } from 'react';

type Option = {
  label: string;
  value: string;
};

const options: Option[] = [
  { label: 'Option 1', value: 'option1' },
  { label: 'Option 2', value: 'option2' },
  { label: 'Option 3', value: 'option3' },
];

const RadioButtonComponent: React.FC = () => {
  const [selectedOption, setSelectedOption] = useState<string>('');

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

  return (
    <div>
      {options.map((option) => (
        <div key={option.value}>
          <label>
            <input
              type="radio"
              value={option.value}
              checked={selectedOption === option.value}
              onChange={handleChange}
            />
            {option.label}
          </label>
        </div>
      ))}
      <div>
        選択されたオプション: {selectedOption}
      </div>
    </div>
  );
};

export default RadioButtonComponent;

このコードでは、ラジオボタンのオプションをoptionsという配列に格納し、useStateフックを使用して選択されたオプションの状態を管理しています。
handleChange関数を使用してラジオボタンの選択が変更されたときに状態を更新します。

これで、ラジオボタンの選択肢が表示され、選択されたオプションが更新されるシンプルなアプリケーションが完成します。