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-select
v3.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
コンポーネントを使用します。
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
プロップを追加します。
<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
プロップを追加することで、複数選択を有効にできます。
<Select
options={aquaticCreatures}
isMulti
/>
opt
は単一のオブジェクトではなくなったため、探索の目的で、onChange
プロップも複数選択をサポートするように変更する必要があります。 複数選択を使用すると、ネストされたオブジェクトになります。 opt.label
とopt.value
は、そうでなければundefined
を返します。
<Select
options={aquaticCreatures}
isMulti
onChange={opt => console.log(opt)}
/>
プロジェクトを実行します。
- npm start
次に、Webブラウザでlocalhost:3000
にアクセスします。
aquaticCreatures
からオプションを選択し、別のオプションを選択します。 複数の選択はすべて、コンポーネントによって示される必要があります。
これで、複数選択機能は終了です。
ユーザーが作成可能なオプション
ユーザー作成可能なオプションを提供して、ユーザーが希望する選択肢がメニューにない状況で、ユーザーが選択メニューにカスタム値を追加できるようにすることができます。
まず、Creatable
コンポーネントをreact-select/creatable
からインポートする必要があります。
import Creatable from 'react-select/creatable';
次に、Select
コンポーネントをCreatable
に置き換えます。
<Creatable
options={aquaticCreatures}
/>
探索の目的で、onChange
プロップもmeta
値を表示するように変更する必要があります。
<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]