Typing Events - ChangeEvent, FormEvent, MouseEvent

Events in React are signals from various parts of the spaceship - button clicks, data input, form submissions. TypeScript lets you precisely define what signal you're receiving and from what source.

Basic Event Types

React provides its own event types that are generic - you can specify which HTML element the event comes from:

1import React from 'react';
2
3// Click event
4const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
5  console.log("Button clicked:", event.currentTarget.textContent);
6};
7
8// Value change event
9const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
10  console.log("New value:", event.target.value);
11};
12
13// Form submission event
14const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
15  event.preventDefault();
16  console.log("Form submitted!");
17};

ChangeEvent - Different Form Elements

The ChangeEvent type differs depending on which element you're listening to:

1// Text input
2const handleTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
3  const value: string = e.target.value;
4  const name: string = e.target.name;
5};
6
7// Textarea
8const handleTextareaChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
9  const value: string = e.target.value;
10};
11
12// Select
13const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
14  const selectedValue: string = e.target.value;
15};
16
17// Checkbox
18const handleCheckboxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
19  const isChecked: boolean = e.target.checked;
20};

MouseEvent - Clicks and Mouse Movement

1// Button click
2const handleButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {
3  console.log("Click position:", e.clientX, e.clientY);
4};
5
6// Click on a div
7const handleDivClick = (e: React.MouseEvent<HTMLDivElement>) => {
8  const target = e.currentTarget; // HTMLDivElement
9};
10
11// Mouse hover
12const handleMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {
13  console.log("Mouse entered the element");
14};

KeyboardEvent - Keyboard Events

1const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
2  if (e.key === "Enter") {
3    console.log("Enter pressed!");
4  }
5  if (e.key === "Escape") {
6    console.log("Escape pressed!");
7  }
8};

Practical Example - Form with Typing

1interface MissionFormData {
2  name: string;
3  destination: string;
4  crewSize: number;
5  priority: "low" | "medium" | "high";
6}
7
8function MissionForm() {
9  const [formData, setFormData] = useState<MissionFormData>({
10    name: "",
11    destination: "",
12    crewSize: 1,
13    priority: "medium"
14  });
15
16  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
17    const { name, value } = e.target;
18    setFormData(prev => ({ ...prev, [name]: value }));
19  };
20
21  const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
22    setFormData(prev => ({
23      ...prev,
24      priority: e.target.value as MissionFormData["priority"]
25    }));
26  };
27
28  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
29    e.preventDefault();
30    console.log("Mission planned:", formData);
31  };
32
33  return (
34    <form onSubmit={handleSubmit}>
35      <input name="name" value={formData.name} onChange={handleInputChange} />
36      <input name="destination" value={formData.destination} onChange={handleInputChange} />
37      <select value={formData.priority} onChange={handleSelectChange}>
38        <option value="low">Low</option>
39        <option value="medium">Medium</option>
40        <option value="high">High</option>
41      </select>
42      <button type="submit">Plan mission</button>
43    </form>
44  );
45}

Functions as Props - Typing Callbacks

1interface ActionButtonProps {
2  label: string;
3  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
4  onHover?: (e: React.MouseEvent<HTMLButtonElement>) => void;
5}
6
7function ActionButton({ label, onClick, onHover }: ActionButtonProps) {
8  return (
9    <button onClick={onClick} onMouseEnter={onHover}>
10      {label}
11    </button>
12  );
13}