Reactでプルダウンの処理を実装する方法

Reactでプルダウンの処理を実装する方法

Reactでプルダウンメニューを実装する基本的な方法をご紹介します。
今回は、TypeScriptを使用して実装します。
特別なライブラリは不要なので、インストール手順はありません。

プルダウンメニューの実装

以下のコードは、シンプルなプルダウンメニューのコンポーネントです。

import React, { useState } from 'react';

interface Option {
  value: string;
  label: string;
}

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

const Dropdown: React.FC = () => {
  const [selectedOption, setSelectedOption] = useState<string>(options[0].value);

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

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

export default Dropdown;

説明

1. Optionインターフェースの定義

• プルダウンの各オプションの値とラベルを定義するためにOptionというインターフェースを作成します。

2. オプションの配列を定義

• optionsという名前の配列に、複数のオプションを定義します。

3. Dropdownコンポーネント

• 状態管理のためにuseStateフックを使用して、選択されたオプションの状態を管理します。
• handleChange関数でプルダウンメニューの選択が変更されたときに状態を更新します。
• selectタグ内でoptions配列をマップしてoptionタグを生成します。

このコードを実行すると、ユーザーがプルダウンメニューからオプションを選択するたびに、選択されたオプションの値が画面に表示されます。