Reactでセレクトボックスの処理を実装する方法

Reactでセレクトボックスの処理を実装する方法

Reactでセレクトボックスの処理を実装する方法の例を以下に示します。
この例では、TypeScriptを使用してセレクトボックスの選択変更時にイベントを処理します。

import React, { useState } from 'react';

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

  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    setSelectedOption(event.target.value);
    console.log('選択されたオプション:', event.target.value);
  };

  return (
    <div>
      <label htmlFor="exampleSelectBox">選択してください:</label>
      <select id="exampleSelectBox" value={selectedOption} onChange={handleChange}>
        <option value="" disabled>-- 選択してください --</option>
        <option value="option1">オプション1</option>
        <option value="option2">オプション2</option>
        <option value="option3">オプション3</option>
      </select>
      <div>選択されたオプション: {selectedOption}</div>
    </div>
  );
};

export default SelectBoxExample;

説明

1. useStateフックを使用して、選択されたオプションの状態を管理します。
2. handleChange関数を作成し、セレクトボックスの選択が変更されたときに呼び出されます。
3. handleChange関数内で、選択されたオプションの値を状態に設定し、コンソールに表示します。
4. selectタグ内で、valueプロパティを状態のselectedOptionに設定し、onChangeイベントでhandleChange関数を呼び出します。

これにより、セレクトボックスの選択が変更されるたびに、選択されたオプションの値が更新され、表示されます。