react-selectを追加する

npm i --save react-select

componentに組み込む

react-selectをcomponentに組み込みます
styleが設定されておりcssを読み込まないとレイアウトが崩れ、うまく動作しません
importを忘れないようにします

import Select from 'react-select';
import 'react-select/dist/react-select.css';

react-selectではoptionsに渡したパラメータの中から条件に合うものをフィルターして表示することができます
optionsはvalueとlabelを持ったObjectの配列です

この例ではBと入力したときにBrowserとBEに絞り込まれます

    const options = [
      { value: 'nfb', label: 'NetFront Browser' },
      { value: 'nfnx', label: 'NetFront NX' },
      { value: 'nfbe', label: 'NetFront BE' },
    ];

valueにセットされた値がフィールドに表示されます
リストから選択されたときにonChangeが呼ばれるのでここでstateやstoreに渡してvalueを更新します

サーバーからデータを取得する

Async Componentを利用し都度リクエストを投げ取得したデータをoptionsに設定することができます

loadOptionsプロパティに関数を設定します
loadOptionsでは入力した文字列を引数で受け取るのでそれを利用しリクエストを作成します

function getUsers (input) {
  if (!input) {
    return Promise.resolve({ options: [] });
  }

  return axios.get(`https://api.github.com/search/users?q=${input}`)
  .then((response) => {
    console.log(response);
    return { options: _.get(response, 'data.items', []) };
  });
}

<Select.Async
  value={this.state.value}
  onChange={this.onChangeUser}
  valueKey="id"
  labelKey="login"
  loadOptions={getUsers}
/>

valueKey, loadKeyを設定することでoptionsのvalue, keyを任意のkey名に変更することができます

大量のデータをリストに表示したい

リストが大量になると表示に時間がかかってしまうため別のライブラリと組み合わせて高速化を行います
react-selectとreact-virtualizedを組み合わせたreact-virtualized-selectというライブラリがあるのでこちらを使います

react-virtualizedはリストの見えている部分＋アルファのみ描画したりでリストやテーブルの表示の高速化に役立つライブラリです
こちらもおすすめなreactライブラリの一つです

今回のサンプルコードは
https://github.com/aMasashiUmeda/acs_advent_2017_13
にアップしてあります。

それでは、明日は @ymtszw さんです！
張り切ってどうぞ

react-selectを使ってサジェスト機能を実装する

react-selectを追加する

componentに組み込む

サーバーからデータを取得する

大量のデータをリストに表示したい