10) Typescript Events

Input Events
Input events are triggered when the user interacts with form fields like: , i) onChange Event

import React, { useState } from "react";

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

  const handleChange = (
    event: React.ChangeEvent<HTMLInputElement>
  ) => {
    setName(event.target.value);
  };

  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={handleChange}
        placeholder="Enter name"
      />

      <p>Name: {name}</p>
    </div>
  );
};

export default InputExample;

ii) Textarea Event

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

<textarea onChange={handleDescription} />

iii) Select Dropdown Event

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

<select onChange={handleCountry}>
  <option>India</option>
  <option>USA</option>
</select>

iv) Keyboard Events

const handleKeyDown = (
  event: React.KeyboardEvent<HTMLInputElement>
) => {
  console.log(event.key);
};

<input onKeyDown={handleKeyDown} />

Form Events
Form events are used with: <form>, form submission, validation

import React, { useState } from "react";

const LoginForm = () => {
  const [email, setEmail] = useState("");

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

    console.log("Form Submitted");
    console.log(email);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />

      <button type="submit">
        Submit
      </button>
    </form>
  );
};

export default LoginForm;

Form Reset Event

const handleReset = (
  event: React.FormEvent<HTMLFormElement>
) => {
  console.log("Form Reset");
};

<form onReset={handleReset}>

Mouse Events
Mouse events are triggered through mouse interactions.

const handleClick = (
  event: React.MouseEvent<HTMLButtonElement>
) => {
  console.log("Button clicked");
};

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