ReactでのonClickの型について
に公開
今回はReactでのonClickの型の付け方についてまとめておこうと思い記事にしてみました。
先に結論ですが、onClickの型は引数でeventをとる場合と取らない場合で型の指定の仕方が変わります。
(1) 引数にeventを取る場合
onClick: (event: MouseEvent<HTMLElement, MouseEvent>) => void;
となります。
eventには
MouseEvent<HTMLElement, MouseEvent>
のようにジェネリクスを2つ持つMouseEventの型をつけることになります。
MouseEventが2回出てきていますが、
1つ目はReactのMouseEventで
2つ目はNativeEventのMouseEventになります。
実際には以下のコードのように型を付けつことができます。
const handleClick = (event: MouseEvent<HTMLElement, MouseEvent>) => {
console.plog(event);
}
そして1つ目のジェネリクスですが、こちらは使用するタグによって指定の仕方が変化します。
button要素の場合
使用するタグがbuttonの場合、1つ目のジェネリクスは"HTMLButtonElement"と指定してあげます。
const handleButtonClick = (event: MouseEvent<HTMLButtonElement, MouseEvent>) => {
console.log(event)
} ;
---省略---
<button type="button" onClick={handleButtonClick}>
Click
</button>
div要素の場合
使用するタグがdivの場合、1つ目のジェネリクスは"HTMLDivElement"と指定します。
const handleClick = (event: MouseEvent<HTMLDivElement, MouseEvent>) => {
console.log(event)
} ;
---省略---
<div onClick={handleClick}>
Click
</div>
以上のように要素によってHTMLElementを指定する方が望ましいようです。
※ 判別がつかない場合はユニオンで指定することも可能
(2) 引数にeventを取らない場合
続いてeventを取らないケースでの型の指定の仕方を見ていきます。
こちらも先に結論になりますが、
onclick: MouseEventHandler<HTMLElement>;
となります。
具体的なコードとしては
const handleClick: MouseEventHandler<HTMLElement> = () => {
console.log("クリックされました");
};
---省略---
<button type="button" onClick={handleClick}>
Click
</button>
となります。
こちらも(1)同様に
button要素の場合には
MouseEventHandler<HTMLButtonElement>
div要素の場合には
MouseEventHandler<HTMLDivElement>
とより具体的な指定の仕方をすることができます。