React Selectでの選択した値の取得

React Selectとは

・select機能の便利なライブラリ
・複数選択とかアニメーションとか検索機能とか自分で実装すると難しい機能が簡単に実現できる

・Searchable Dropdown

選択肢の設定

・選択肢は公式にあるようにオブジェクトの配列で渡す
・ただの配列では渡せないので注意

data.ts

export const colourOptions: readonly ColourOption[] = [
  { value: 'ocean', label: 'Ocean', color: '#00B8D9', isFixed: true },
  { value: 'blue', label: 'Blue', color: '#0052CC', isDisabled: true },
  { value: 'purple', label: 'Purple', color: '#5243AA' },
  { value: 'red', label: 'Red', color: '#FF5630', isFixed: true },
  { value: 'orange', label: 'Orange', color: '#FF8B00' },
  { value: 'yellow', label: 'Yellow', color: '#FFC400' },
  { value: 'green', label: 'Green', color: '#36B37E' },
];

選択した値の取得

イベントで受け取ることが可能

App.tsx

const handleChange = (e: any) => { 👈 ここ
  console.log(e)
}

<Select
  aria-labelledby="aria-label"
  inputId="aria-example-input"
  name="aria-live-color"
  onMenuOpen={onMenuOpen}
  onMenuClose={onMenuClose}
  options={colourOptions}
  onChange={handleChange}　👈 onChangeやonClickイベントに関数を設定
/>

終わりに

値の取得がわからなくてハマったのでまとめました。