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>


とより具体的な指定の仕方をすることができます。