【React】React×TypeScriptで通常のselect要素の型を合わせるときのメモ

【ReactのHTML部分(returnの中)】

<label htmlFor='hogeID'>
  <select
    id='hogeID'
    onChange={( e : React.ChangeEvent<{ value: unknown }> ) => {
      handleChange_hoge( e.target.value as string );
    }}
  >
    <option value=''>ほげ</option>
    <option value='hoge1'>ほげいち</option>
    <option value='hoge2'>ほげに</option>
  </select>
</label>

e.valueではなくe.target.valueと指定する。
以下、参考サイト。

【React + TypeScript】イベントから型を指定して渡す方法

Material UI を使用している際 onChange イベント時にせっかく TypeScript を使用しているのに unknown の型指定しか出来なかったため、対策時のメモ

c-a-p-engineer.github.io

【onChangeで使うhandleChange_hoge関数】

const handleChange_hoge = ( value : string ) => {
  if ( value ) {
    setCat( value );
  } else {
    setCat( '' );
  }
};