前回に引き続き、今回は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はよく使うのでしっかり抑えておきたいところですね。