Reactでのドロップダウンメニューの作成方法

1. 単純なドロップダウンメニュー: 最も基本的なドロップダウンメニューは、HTMLの<select>要素と<option>要素を使用して作成できます。以下はその例です。

import React from 'react';
function DropdownMenu() {
  return (
    <select>
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
    </select>
  );
}
export default DropdownMenu;

2. ドロップダウンメニューの値の取得: ドロップダウンメニューで選択された値を取得するには、onChangeイベントを使用します。以下はその例です。

import React, { useState } from 'react';
function DropdownMenu() {
  const [selectedValue, setSelectedValue] = useState('');
  const handleChange = (event) => {
    setSelectedValue(event.target.value);
  };
  return (
    <select onChange={handleChange}>
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
    </select>
  );
}
export default DropdownMenu;

3. ドロップダウンメニューの動的なオプション: ドロップダウンメニューのオプションを動的に生成したい場合は、JavaScriptの配列を使用してオプションをマップすることができます。以下はその例です。

import React from 'react';
const options = ['Option 1', 'Option 2', 'Option 3'];
function DropdownMenu() {
  return (
    <select>
      {options.map((option, index) => (
        <option key={index} value={option.toLowerCase()}>
          {option}
        </option>
      ))}
    </select>
  );
}
export default DropdownMenu;

これらはReactでドロップダウンメニューを作成するためのいくつかの基本的な方法です。必要に応じて、これらのコード例をカスタマイズして使用してください。