Typing React Events

Events allow a React component to respond to user actions.

• Button clicks
• Input changes
• Form submission
• Mouse actions
• Keyboard actions
• Selection changes

<button onClick={handleClick}>
    Click Me
</button>

TypeScript helps us understand which properties and methods are available on an event object.

• Provides better editor suggestions.
• Prevents incorrect event usage.
• Makes event handlers easier to understand.
• Improves code safety.

function handleClick() {
    console.log("Button clicked");
}

return (
    <button onClick={handleClick}>
        Click
    </button>
);

When the button is clicked, handleClick is called.

function handleClick(
    event: React.MouseEvent<HTMLButtonElement>
): void {

    console.log(event.currentTarget);
}

The generic parameter specifies the HTML element that generated the event.

React.MouseEvent is commonly used for mouse events.

function handleClick(
    event: React.MouseEvent
): void {

    console.log(event.clientX);
    console.log(event.clientY);
}

The event object provides information about the mouse interaction.

function handleClick(
    event: React.MouseEvent<HTMLButtonElement>
): void {

    console.log(
        event.currentTarget.textContent
    );
}

return (
    <button onClick={handleClick}>
        Save
    </button>
);

React.ChangeEvent is commonly used for input value changes.

function handleChange(
    event: React.ChangeEvent<HTMLInputElement>
): void {

    console.log(event.target.value);
}

function handleChange(
    event: React.ChangeEvent<HTMLInputElement>
): void {

    console.log(
        event.target.value
    );
}

return (
    <input
        type="text"
        onChange={handleChange}
    />
);

const [name, setName] =
    useState<string>("");

function handleChange(
    event: React.ChangeEvent<HTMLInputElement>
): void {

    setName(event.target.value);
}

return (
    <input
        value={name}
        onChange={handleChange}
    />
);

A textarea uses HTMLTextAreaElement.

function handleChange(
    event: React.ChangeEvent<HTMLTextAreaElement>
): void {

    console.log(
        event.target.value
    );
}

return (
    <textarea
        onChange={handleChange}
    />
);

function handleChange(
    event: React.ChangeEvent<HTMLSelectElement>
): void {

    console.log(
        event.target.value
    );
}

return (
    <select onChange={handleChange}>

        <option value="react">
            React
        </option>

        <option value="typescript">
            TypeScript
        </option>

    </select>
);

function handleChange(
    event: React.ChangeEvent<HTMLInputElement>
): void {

    console.log(
        event.target.checked
    );
}

return (
    <input
        type="checkbox"
        onChange={handleChange}
    />
);

The checked property gives the checkbox state.

React.FormEvent can be used for form submission events.

function handleSubmit(
    event: React.FormEvent<HTMLFormElement>
): void {

    event.preventDefault();

    console.log("Form submitted");
}

function handleSubmit(
    event: React.FormEvent<HTMLFormElement>
): void {

    event.preventDefault();

    console.log("Submitted");
}

return (
    <form onSubmit={handleSubmit}>

        <button type="submit">
            Submit
        </button>

    </form>
);

preventDefault() prevents the browser's default form submission behavior.

Keyboard events can be typed using React.KeyboardEvent.

function handleKeyDown(
    event: React.KeyboardEvent<HTMLInputElement>
): void {

    console.log(event.key);
}

function handleKeyDown(
    event: React.KeyboardEvent<HTMLInputElement>
): void {

    if (event.key === "Enter") {
        console.log("Enter pressed");
    }
}

return (
    <input
        onKeyDown={handleKeyDown}
    />
);

Focus events can be typed using React.FocusEvent.

function handleFocus(
    event: React.FocusEvent<HTMLInputElement>
): void {

    console.log(
        "Input focused"
    );
}

return (
    <input onFocus={handleFocus} />
);

function handleBlur(
    event: React.FocusEvent<HTMLInputElement>
): void {

    console.log(
        "Input lost focus"
    );
}

return (
    <input onBlur={handleBlur} />
);

onBlur runs when an element loses focus.

function handleMouseEnter(
    event: React.MouseEvent<HTMLDivElement>
): void {

    console.log("Mouse entered");
}

return (
    <div onMouseEnter={handleMouseEnter}>
        Move mouse here
    </div>
);

interface ButtonProps {
    onClick: (
        event: React.MouseEvent<HTMLButtonElement>
    ) => void;
}

function MyButton({
    onClick
}: ButtonProps) {

    return (
        <button onClick={onClick}>
            Save
        </button>
    );
}

Event handlers can be typed when they are passed from a parent component to a child component.

TypeScript can often infer the event type when the handler is written directly inside JSX.

return (
    <input
        onChange={(event) => {
            console.log(event.target.value);
        }}
    />
);

In this situation, TypeScript understands the event based on the JSX element.

return (
    <button
        onClick={(event) => {
            console.log(
                event.currentTarget
            );
        }}
    >
        Click
    </button>
);

Inline event handlers can also receive an automatically inferred event object.

React Native has its own event types because it uses native components instead of HTML elements.

import {
    TextInput
} from "react-native";

function App() {

    const handleChange = (
        value: string
    ): void => {

        console.log(value);

    };

    return (
        <TextInput
            onChangeText={handleChange}
        />
    );
}

Here, onChangeText directly provides the new text value.

import {
    Button
} from "react-native";

function App() {

    const handlePress = (): void => {
        console.log("Button pressed");
    };

    return (
        <Button
            title="Save"
            onPress={handlePress}
        />
    );
}

React Native's Button uses onPress for button interaction.

import {
    TextInput
} from "react-native";

function App() {

    const handleChangeText = (
        text: string
    ): void => {

        console.log(text);

    };

    return (
        <TextInput
            onChangeText={handleChangeText}
            placeholder="Enter name"
        />
    );
}

The onChangeText callback receives a string, making it simple to type.

• Using an HTML event type for a React Native component.
• Using HTMLInputElement for a button event.
• Forgetting the correct React event type.
• Confusing target and currentTarget.
• Using the wrong element type in React.MouseEvent.
• Using browser-specific event types in React Native.

Event handler functions that do not return a value can be explicitly typed as void.

const handleClick = (
    event: React.MouseEvent<HTMLButtonElement>
): void => {

    console.log(
        event.currentTarget
    );
};

import {
    useState
} from "react";

function LoginForm() {

    const [email, setEmail] =
        useState<string>("");

    const handleChange = (
        event: React.ChangeEvent<HTMLInputElement>
    ): void => {

        setEmail(event.target.value);
    };

    const handleSubmit = (
        event: React.FormEvent<HTMLFormElement>
    ): void => {

        event.preventDefault();

        console.log(email);
    };

    return (
        <form onSubmit={handleSubmit}>

            <input
                type="email"
                value={email}
                onChange={handleChange}
            />

            <button type="submit">
                Login
            </button>

        </form>
    );
}

• Use the correct React event type for each event.
• Specify the correct HTML element type when needed.
• Use ChangeEvent for controlled input changes.
• Use FormEvent for form submission.
• Use MouseEvent for mouse interactions.
• Use KeyboardEvent for keyboard interactions.
• Let TypeScript infer inline event types when it can.
• Use React Native-specific callback signatures for native components.

import {
    useState
} from "react";

function StudentForm() {

    const [name, setName] =
        useState<string>("");

    const [course, setCourse] =
        useState<string>("React");

    const handleNameChange = (
        event: React.ChangeEvent<HTMLInputElement>
    ): void => {

        setName(event.target.value);
    };

    const handleCourseChange = (
        event: React.ChangeEvent<HTMLSelectElement>
    ): void => {

        setCourse(event.target.value);
    };

    const handleSubmit = (
        event: React.FormEvent<HTMLFormElement>
    ): void => {

        event.preventDefault();

        console.log({
            name,
            course
        });
    };

    const handleReset = (
        event: React.MouseEvent<HTMLButtonElement>
    ): void => {

        setName("");
        setCourse("React");

        console.log(
            event.currentTarget
        );
    };

    return (
        <form onSubmit={handleSubmit}>

            <h2>
                Student Form
            </h2>

            <input
                type="text"
                value={name}
                placeholder="Enter name"
                onChange={handleNameChange}
            />

            <br />
            <br />

            <select
                value={course}
                onChange={handleCourseChange}
            >

                <option value="React">
                    React
                </option>

                <option value="TypeScript">
                    TypeScript
                </option>

                <option value="React Native">
                    React Native
                </option>

            </select>

            <br />
            <br />

            <button type="submit">
                Save
            </button>

            <button
                type="button"
                onClick={handleReset}
            >
                Reset
            </button>

        </form>
    );
}

export default StudentForm;

This example combines typed input events, select events, form events, mouse events, state, and event handler return types in one component.