メニュー

【React】react-selectを使った型を合わせるときのメモ

  • 投稿日
  • 著者 ひがし
  • カテゴリー React

TypeScript込みの場合、「【React】React×TypeScriptで通常のselect要素の型を合わせるときのメモ」で紹介されるような書き方だと、onChangeのところで型のシンタックスエラーが出るので注意。

import React from 'react'
import { useState } from 'react'
import Select from 'react-select'
import { SingleValue } from 'react-select'

interface HogeHogeSelectType {
  value : string;
  label: string;
}

function HogeHoge() : JSX.Element {

  const [ myValue, setMyValue ] = useState( '' );

  const hogeOpt = [
    { value : 'foo', label : 'ふー' },
    { value : 'bar', label : 'ばー' }
  ]

  const handleChange_hoge = ( newValue: SingleValue<HogeHogeSelectType> ) => {
    if ( newValue ) {
      setMyValue( newValue.value );
    } else {
      setMyValue( '' );
    }
  };

  return (
    <>
      <Select
        isSearchable
        options={hogeOpt}
        placeholder='選択肢の中から選んでね'
        onChange={handleChange_hoge}
      />
　・
　・
　・
react-select