目次
Clickイベントで型を指定する
ReactやTypeScriptの扱いに慣れていない頃は、型の指定って迷いますよね・・!
今回は、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イベントの型の指定方法について紹介しました。
ReactやTypeScriptは慣れると非常に効率的にプログラミングができるようになりますが、それまでは結構扱いが難しいですよね!
フロントエンドではTypeScriptを使用した開発が主流になりつつあるので、早めにマスターして使いこなせるようにしていきましょう!
コメント