React-Selectを使用して検索可能な非同期ドロップダウンを作成する方法

序章

HTMLは、エンドユーザーが<option>のドロップダウンメニューから選択できる<select>要素を提供します。ただし、ユーザーが利用可能な選択肢をフィルタリングできるようにするなど、選択メニューがユーザーエクスペリエンスの優れた機能の恩恵を受ける場合があります。

React Select は、動的検索とフィルターを備えたReact用の高度に構成可能な選択メニューライブラリです。また、非同期オプションの読み込み、アクセシビリティ、および高速レンダリング時間をサポートします。

このチュートリアルでは、ReactSelectをプロジェクトに追加します。また、複数選択、ユーザー作成可能なオプション、非同期オプションの読み込みなど、利用可能な追加機能のいくつかについても説明します。

前提条件

このチュートリアルを完了するには、次のものが必要です。

Node.jsのローカル開発環境。これを行うには、Node.jsのインストール方法とローカル開発環境の作成に従ってください。

このチュートリアルは、ノードv14.7.0、npm v6.14.7、react v16.13.1、およびreact-selectv3.1.0で検証されました。

ステップ1—プロジェクトの設定

create-react-appを使用してReactAppを生成し、依存関係をインストールすることから始めます。

npx create-react-app react-select-example

新しいプロジェクトディレクトリに移動します。

cd react-select-example

これで、Reactアプリケーションを実行できます。

npm start

プロジェクトのエラーや問題を修正してから、Webブラウザでlocalhost:3000にアクセスしてください。

動作するReactアプリケーションができたら、ReactSelectの追加を開始できます。

ステップ2—ReactSelectを追加する

プロジェクトでは、react-selectライブラリをインストールする必要があります。

npm install react-select@3.1.0

注：現在、ライブラリの最新バージョン（3.1.0）に問題があり、StrictModeを使用するとレガシーAPIおよび非推奨APIの警告が生成されます。これらは既知の問題であり、いくつかの保留中のプルリクエストがそれらのいくつかに対処します。

App.jsを変更して、水生動物のドロップダウンメニューを表示する例を次に示します。

nano src/App.js

aquaticCreaturesのアレイを追加し、ReactSelectが提供するSelectコンポーネントを使用します。

src / App.js

import React from 'react';
import Select from 'react-select';

const aquaticCreatures = [
  { label: 'Shark', value: 'Shark' },
  { label: 'Dolphin', value: 'Dolphin' },
  { label: 'Whale', value: 'Whale' },
  { label: 'Octopus', value: 'Octopus' },
  { label: 'Crab', value: 'Crab' },
  { label: 'Lobster', value: 'Lobster' },
];

function App() {
  return (
    <div className="App">
      <Select
        options={aquaticCreatures}
      />
    </div>
  );
}

export default App;

あなたは3つのことに気付くでしょう：

react-selectからSelectコンポーネントをインポートする必要があります。
オプション配列aquaticCreaturesの各オブジェクトには、文字列であるlabelと、任意のタイプのvalueの2つ以上の値が必要です。
必要な小道具はoptionsアレイだけです。

注： React Selectコンポーネントに文字列の配列を入力する場合は、labelとvalueを手動で繰り返すのではなく、JavaScriptのマップ配列メソッドを使用できます。 optionsアレイを準備するには：

someArrayOfStrings.map(opt => ({ label: opt, value: opt }));

ユーザーがオプションを選択したときにキャプチャするには、onChange小道具を追加します。

src / App.js

<Select
  options={aquaticCreatures}
  onChange={opt => console.log(opt.label, opt.value)}
/>

onChange関数に渡される値は、オプション自体を構成するオブジェクトと同じであるため、label変数とvalue変数が含まれます。

プロジェクトを実行します。

npm start

次に、Webブラウザでlocalhost:3000にアクセスします。

aquaticCreaturesのReactSelectメニューが表示されます。

このメニューを操作すると、onChangeイベントがトリガーされ、コンソールにメッセージが記録されます。ブラウザの開発者コンソールを開くと、選択したlabelとvalueを確認する必要があります。

Output'Shark' 'Shark'

React Selectメニューが機能するようになったので、このライブラリが提供する他の機能のいくつかを調べることができます。

ステップ3—詳細オプションの追加

検索と選択に加えて、React Selectは、複数選択、ユーザー作成可能なオプション、非同期オプションの読み込みなどの他の機能を提供します。

複数選択

HTML <select>は、multipleをサポートしており、複数の<option>を選択できます。

同様に、React Selectでは、要素にisMultiプロップを追加することで、複数選択を有効にできます。

src / App.js

<Select
  options={aquaticCreatures}
  isMulti
/>

optは単一のオブジェクトではなくなったため、探索の目的で、onChangeプロペラも複数選択をサポートするように変更する必要があります。複数選択を使用すると、ネストされたオブジェクトになります。 opt.labelとopt.valueは、そうでなければundefinedを返します。

src / App.js

<Select
  options={aquaticCreatures}
  isMulti
  onChange={opt => console.log(opt)}
/>

プロジェクトを実行します。

npm start

次に、Webブラウザでlocalhost:3000にアクセスします。

aquaticCreaturesからオプションを選択し、別のオプションを選択します。複数の選択はすべて、コンポーネントによって示される必要があります。

これで、複数選択機能は終了です。

ユーザーが作成可能なオプション

ユーザー作成可能なオプションを提供して、ユーザーが希望する選択肢がメニューにない状況で、ユーザーが選択メニューにカスタム値を追加できるようにすることができます。

まず、Creatableコンポーネントをreact-select/creatableからインポートする必要があります。

src / App.js

import Creatable from 'react-select/creatable';

次に、SelectコンポーネントをCreatableに置き換えます。

src / App.js

<Creatable
  options={aquaticCreatures}
/>

探索の目的で、onChangeプロペラもmeta値を表示するように変更する必要があります。

src / App.js

<Creatable
  options={aquaticCreatures}
  onChange={(opt, meta) => console.log(opt, meta)}
/>

プロジェクトを実行します。

npm start

Cuttlefishなど、現在存在しないオプションを入力すると、'Create'オプションが表示されます。

新しいメニュー項目を作成した後、ブラウザの開発者コンソールの出力で次のことを確認する必要があります。

Output{ label: 'Cuttlefish', value: 'Cuttlefish', __isNew__: true }
{ action: 'create-option' }

イベントが新しいオプションであることを検出する方法が2つあることに注意してください。選択したオプションの__isNew__変数と、イベントハンドラーのmeta引数のaction値です。。

また、labelとvalueが同じ文字列になることに注意してください。 labelに別のvalueを提供するオプションはユーザーに提供されません。これは、データストアの一貫性を保つためのソリューションへのアプローチに影響を与える可能性があります。

これで、ユーザーが作成できるオプション機能は終了です。

非同期オプションの読み込み

非同期オプションの読み込みを使用すると、ユーザーはアプリケーションの初期読み込み時間を短縮できます。これは、ユーザーがコンポーネントを操作したときにのみコンポーネントにデータを入力します。

Creatableコンポーネントと同様に、[X54X]からAsyncSelectをインポートする必要があります。

import AsyncSelect from 'react-select/async'

次に、SelectコンポーネントをAsyncに置き換えます。

src / App.js

<AsyncSelect
  loadOptions={loadOptions}
/>

オプションをロードするには、loadOptionspropに次のような関数を渡します。

const loadOptions = (inputValue, callback) => {
  // perform a request
  const requestResults = ...

  callback(requestResults)
}

React Selectは、初期化時にloadOptions関数を呼び出してドロップダウンにデータを入力するdefaultOptionsプロップと、値が真である間にオプションをキャッシュするcacheOptionsプロップもサポートします。

これで、非同期オプションの読み込み機能は終了です。

結論

このチュートリアルでは、ReactSelectをプロジェクトに追加しました。 React Selectのカスタマイズと機能セットは、標準の選択メニューよりも優れたユーザーエクスペリエンスをユーザーに提供する可能性があります。

propsおよび高度な機能に関する追加情報は、ReactSelectのドキュメントに記載されています。

Reactの詳細については、 React.js シリーズのコーディング方法をご覧になるか、Reactトピックページで演習やプログラミングプロジェクトを確認してください。