ReactSynthetic Event
の型についてぐぐってばかりいるのでメモを残しておきます。
Synthetic Event とは?
onChange={event => console.log(event)}
のevent
です。
Synthetic Event の型
FormEvent
submit.tsx
import { FormEvent } from 'react';
...
const handleSubmit = (e: FormEvent) => {
...
<form onSubmit={handleSubmit}>
...
<button type="submit" onClick={handleSubmit}>Submit</button>
...
ChangeEvent
change.tsx
import { ChangeEvent } from 'react';
...
const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
...
const handleSelectChange = (e: ChangeEvent<HTMLSelectElement>) => {
...
<input value={inputValue} onChange={handleInputChange} type="text" />
...
<select value={selectValue} onChange={handleSelectChange}>
...
KeyboardEvent
keyPress.tsx
import { KeyboardEvent } from 'react';
...
const handleKeyPress = (e: KeyboardEvent) => {
...
const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
...
<textarea
onKeyPress={handleKeyPress}
onChange={handleChange}
...
MouseEvent
<HTML...Element>
なしでdataset
を参照しようとするとタイプエラーがでます。
<button></button>
以外にonClick
をつけることを想定するなら<HTMLElement>
を使ってしまうと楽です。
click.tsx
import { MouseEvent } from 'react';
...
const handleClick = (
e: MouseEvent<HTMLButtonElement>
) => {
e.preventDefault();
console.log(e.currentTarget.dataset.id);
}
...
<button data-id={someId} onClick={handleClick}>click</button>
...