前回に引き続き、今回はReactのonchangeの型に付け方についてもまとめていこうと思います。

(1) changeEventの基本

changeEventの主な使用ケースとしてはinput要素(inputタグ)やselect要素(selectタグ)になります。
changeEventはこの要素の値が変化するたびに発火します。

(2) inputタグで使用した場合

inputタグの中でonChangeを使用するケースについて具体的にみていきます。

const InputText = () => {
  const [text, setText] = useState("")
  const onInputText = (e: ChangeEvent<HTMLInputElement>) => {
    setText(e.target.value);
  };
  
  return (
    <input type="text" onChange={(e) => onInputText(e)} />
  )
}  

上記のようにinputタグの中で値が変わったときに発火するイベントをonChangeで登録した場合(今回はonInputTextをeを引数にして登録してます。)、onInputTextで受け取ったeの型は
型引数でHTMLInputElementを受け取る

ChangeEvent<HTMLInputElement>

という形になります。
onClick(MouseEvent)との違いとしてはジェネリクスを1つしか取らないことが挙げられます。

(2) selectタグの中で使用した場合

こちらは型引数を以下のように変更することで型を指定することができます。

ChangeEvent<HTMLSelectElement>

※ ただしmuiのv5で使用する場合は以下のように"SelectChangeEvent"というものを使用する必要があります。

const onSelectDrink = (e: SelectChangeEvent<string>) => {
  setMenu(e.target.value);
}

--- 省略 ---

<Select
    label="ドリンクメニュー"
    value={priority}
    onChange={(e) => onSelectDrink(e)}
  >
    <MenuItem value="coffee">コーヒー</MenuItem>
    <MenuItem value="orangeJuece">オレンジジュース</MenuItem>
  </Select>

今回紹介したonChangeと前回紹介したonClickはよく使うのでしっかり抑えておきたいところですね。