React Bootstrapフォームラジオボタンの使用方法

1. ラジオボタンのインストール: まず、React Bootstrapライブラリをインストールします。以下のコマンドを使用します:

npm install react-bootstrap bootstrap

2. フォームコンポーネントのインポート: 必要なコンポーネントをインポートします。

import { Form } from 'react-bootstrap';

3. ラジオボタンの作成: フォーム内にラジオボタンを作成します。以下は基本的な例です:

<Form>
  <Form.Check
    type="radio"
    label="オプション1"
    name="options"
    id="option1"
  />
  <Form.Check
    type="radio"
    label="オプション2"
    name="options"
    id="option2"
  />
  <Form.Check
    type="radio"
    label="オプション3"
    name="options"
    id="option3"
  />
</Form>

4. ラジオボタンのデフォルト選択: デフォルトで選択されているラジオボタンを設定するには、defaultChecked属性を使用します。

<Form>
  <Form.Check
    type="radio"
    label="オプション1"
    name="options"
    id="option1"
    defaultChecked
  />
  <Form.Check
    type="radio"
    label="オプション2"
    name="options"
    id="option2"
  />
  <Form.Check
    type="radio"
    label="オプション3"
    name="options"
    id="option3"
  />
</Form>

5. イベントハンドリング: ラジオボタンの選択状態が変更されたときにイベントを処理するには、onChangeイベントハンドラを使用します。

import { useState } from 'react';
function MyForm() {
  const [selectedOption, setSelectedOption] = useState('');
  const handleOptionChange = (event) => {
    setSelectedOption(event.target.value);
  };
  return (
    <Form>
      <Form.Check
        type="radio"
        label="オプション1"
        name="options"
        id="option1"
        value="option1"
        onChange={handleOptionChange}
        checked={selectedOption === 'option1'}
      />
      <Form.Check
        type="radio"
        label="オプション2"
        name="options"
        id="option2"
        value="option2"
        onChange={handleOptionChange}
        checked={selectedOption === 'option2'}
      />
      <Form.Check
        type="radio"
        label="オプション3"
        name="options"
        id="option3"
        value="option3"
        onChange={handleOptionChange}
        checked={selectedOption === 'option3'}
      />
    </Form>
  );
}