Reactでドロップダウン検索バーを作成する方法

Reactを使用してドロップダウン検索バーを作成する方法を紹介します。これは、ユーザーが選択肢の中から項目を選ぶためのUIコンポーネントです。以下に、シンプルで簡単な方法といくつかのコード例を示します。

まず、Reactプロジェクトをセットアップします。必要なパッケージをインストールし、適切なディレクトリ構造を作成します。

npx create-react-app dropdown-search-bar
cd dropdown-search-bar

次に、必要なコンポーネントを作成します。以下は、簡単な例です。

import React, { useState } from 'react';
const DropdownSearchBar = () => {
  const [selectedItem, setSelectedItem] = useState('');
  const [isOpen, setIsOpen] = useState(false);
  const options = ['Option 1', 'Option 2', 'Option 3'];
  const handleItemClick = (item) => {
    setSelectedItem(item);
    setIsOpen(false);
  };
  return (
    <div>
      <input
        type="text"
        placeholder="Search..."
        value={selectedItem}
        onChange={(e) => setSelectedItem(e.target.value)}
        onClick={() => setIsOpen(!isOpen)}
      />
      {isOpen && (
        <ul>
          {options.map((option, index) => (
            <li key={index} onClick={() => handleItemClick(option)}>
              {option}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};
export default DropdownSearchBar;

この例では、DropdownSearchBarコンポーネントが作成され、状態としてselectedItemとisOpenが管理されています。selectedItemは選択された項目を保持し、isOpenはドロップダウンメニューが開いているかどうかを示します。

入力フィールドをクリックすると、isOpenの値が切り替わり、ドロップダウンメニューが表示されます。選択肢のリストはoptions配列から生成され、クリックされるとhandleItemClick関数が呼び出され、選択された項目がselectedItemに設定されます。

このコンポーネントを使用するには、適切な場所で<DropdownSearchBar />をレンダリングします。

これで、Reactでドロップダウン検索バーを作成する方法がわかりました。このコンポーネントをカスタマイズしてデザインや動作を調整することもできます。