Typing Events (Forms and Inputs)

In React, events are used to handle user actions like typing or submitting forms. In TypeScript, you define what kind of event you are working with, so you can safely access its values.

Typing Input Change Event

function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
  console.log(event.target.value);
}

• event comes from an <input>;
• value is available and correctly typed. Using with input:

<input onChange={handleChange} />

Typing Form Submit Event

function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
  event.preventDefault();
}

• used for form submission;
• preventDefault() stops page reload.

Using with form:

<form onSubmit={handleSubmit}>
  <button type="submit">Submit</button>
</form>

Type events based on the element they come from, so you can safely access their properties.