【React×TypeScript】Clickイベントの型の指定

React

Clickイベントで型を指定する

ReactTypeScriptの扱いに慣れていない頃は、型の指定って迷いますよね・・!

今回は、ReactでClickイベントでの型を指定する方法について書いていきたいと思います。

Clickイベントで型を指定する方法

Buttonクリックの場合

Buttonクリックだと、React.MouseEvent<HTMLButtonElement, MouseEvent>となります!

const buttonClick = (
  event: React.MouseEvent<HTMLButtonElement, MouseEvent>
) => {
  .
  .
};

テーブル行クリックの場合

TableRowクリックだと、React.MouseEvent<HTMLTableRowElement, MouseEvent>となります。

  const tableRowClick = (
    event: React.MouseEvent<HTMLTableRowElement, MouseEvent>
  ) => {
    console.log(event);
  };

Changeイベントで型を指定する方法

Changeイベントで型を指定する時も迷うことがありますよね!

その際の型の指定方法は、以下の記事へまとめています!

Propsに関数の型を指定する方法

ReactのPropsに関数の型を指定する際の方法については、以下の記事へまとめていますので確認してみてください!

まとめ

今回は、ReactとTypeScriptでのClickイベントの型の指定方法について紹介しました。

ReactTypeScriptは慣れると非常に効率的にプログラミングができるようになりますが、それまでは結構扱いが難しいですよね!

フロントエンドではTypeScriptを使用した開発が主流になりつつあるので、早めにマスターして使いこなせるようにしていきましょう!

オススメの関連商品

Note一覧

コメント