Typowanie Zdarzen - ChangeEvent, FormEvent, MouseEvent

Zdarzenia w React to sygnaly z różnych części statku kosmicznego - klikniecia przyciskow, wprowadzanie danych, przesylanie formularzy. TypeScript pozwala precyzyjnie określić, jaki sygnal otrzymujesz i z jakiego źródła.

Podstawowe typy zdarzen

React dostarcza własne typy zdarzen, które sa generyczne - możesz określić, z jakiego elementu HTML pochodzi zdarzenie:

1import React from 'react';
2
3// Zdarzenie klikniecia
4const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
5  console.log("Kliknieto przycisk:", event.currentTarget.textContent);
6};
7
8// Zdarzenie zmiany wartości
9const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
10  console.log("Nowa wartosc:", event.target.value);
11};
12
13// Zdarzenie przeslania formularza
14const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
15  event.preventDefault();
16  console.log("Formularz przeslany!");
17};

ChangeEvent - różne elementy formularzy

Typ ChangeEvent różni sie w zależności od elementu, na którym nasluchujesz:

1// Input tekstowy
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 - klikniecia i ruch myszy

1// Klikniecie przycisku
2const handleButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {
3  console.log("Pozycja klikniecia:", e.clientX, e.clientY);
4};
5
6// Klikniecie na div
7const handleDivClick = (e: React.MouseEvent<HTMLDivElement>) => {
8  const target = e.currentTarget; // HTMLDivElement
9};
10
11// Najechanie mysza
12const handleMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {
13  console.log("Mysz najechala na element");
14};

KeyboardEvent - zdarzenia klawiatury

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

Praktyczny przykład - formularz z typowaniem

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("Misja zaplanowana:", 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">Niski</option>
39        <option value="medium">Sredni</option>
40        <option value="high">Wysoki</option>
41      </select>
42      <button type="submit">Zaplanuj misje</button>
43    </form>
44  );
45}

Funkcje jako props - typowanie callbackow

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}