Typing Events
In this page:
Typing Button Events
A button's onClick handler in React is typed as React.MouseEvent<HTMLButtonElement>, which is React's own synthetic event wrapper, not the raw browser MouseEvent used in plain DOM code.
Example: Typing Button Events
import React from "react";
function Button(): React.JSX.Element {
const handleClick = (event: React.MouseEvent<HTMLButtonElement>): void => {
console.log("Clicked", event.currentTarget.tagName);
};
return <button onClick={handleClick}>Click</button>;
}
export default Button;Typing Input Events
An input's onChange handler is typed as React.ChangeEvent<HTMLInputElement>, giving you a correctly typed event.target.value without needing to manually cast the target.
Example: Typing Input Events
import React from "react";
function Input(): React.JSX.Element {
const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
console.log(event.target.value);
};
return <input onChange={handleChange} />;
}
export default Input;Typing Form Events
A form's onSubmit handler is typed as React.FormEvent<HTMLFormElement>, and calling event.preventDefault() on it is how you stop React's default browser form-submission behavior.
Example: Typing Form Events
import React from "react";
function Form(): React.JSX.Element {
const handleSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
event.preventDefault();
console.log("Submitted");
};
return <form onSubmit={handleSubmit}></form>;
}
export default Form;Typing Keyboard Events
A keyboard handler is typed as React.KeyboardEvent<HTMLInputElement> (or whichever element it's attached to), exposing .key for checking which key triggered the event, like detecting an Enter keypress.
Example: Typing Keyboard Events
import React from "react";
function SearchBox(): React.JSX.Element {
const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {
if (event.key === "Enter") console.log("Enter pressed");
};
return <input onKeyDown={handleKeyDown} />;
}
export default SearchBox;Typing Select Events
A select element's onChange handler is typed as React.ChangeEvent<HTMLSelectElement>, whose event.target.value is always a string even when the selected option represents a number, so you still need to convert it yourself.
Example: Typing Select Events
import React from "react";
function SizePicker(): React.JSX.Element {
const handleChange = (event: React.ChangeEvent<HTMLSelectElement>): void => {
console.log(event.target.value);
};
return (
<select onChange={handleChange}>
<option value="1">Small</option>
</select>
);
}
export default SizePicker;Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: