When working with forms in React, you frequently handle events such as onChange for inputs and onSubmit for forms. Typing these events is essential for ensuring type safety and getting helpful autocompletion in your editor. React provides specific types for these scenarios: use React.ChangeEvent<HTMLInputElement> for input changes and React.FormEvent<HTMLFormElement> for form submissions. These types help you access event properties safely, such as event.target.value for input fields or event.preventDefault() for forms.

Handling an input field's change event, you should type the event parameter as React.ChangeEvent<HTMLInputElement>. This makes sure that TypeScript understands the context of the event and what properties are available on the target. Similarly, when handling a form's submit event, type the event as React.FormEvent<HTMLFormElement>. This ensures that you can safely call methods like preventDefault() and interact with the form elements in a type-safe way.

Consider a simple controlled input component. You might write an onChange handler like this:

const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  console.log(event.target.value);
};

For a form submission, you would type the handler as follows:

const handleFormSubmit = (event: React.FormEvent<HTMLFormElement>) => {
  event.preventDefault();
  // handle form data here
};

These typings help prevent errors, such as trying to access properties that do not exist on the event target, and they provide better code completion and documentation. In more complex forms, you might handle multiple input types. For example, if you have a textarea, you would use React.ChangeEvent<HTMLTextAreaElement>. This pattern extends to other form elements like select by specifying the correct HTML element type.