0Pricing
React Academy · Lekcja

Typowanie zdarzeń i refów w TypeScript

Używanie generyków React.ChangeEvent, React.MouseEvent i RefObject podczas interakcji z DOM.

Typowanie zdarzeń i refów w TypeScript to bezpłatna lekcja React Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.

Syntetyczne zdarzenia Reacta

React opakowuje natywne zdarzenia DOM w SyntheticEvent. Każdy typ zdarzenia ma odpowiadający mu parametr generyczny: React.ChangeEvent<HTMLInputElement>, React.MouseEvent<HTMLButtonElement> itd.

Typowanie onChange

Najczęściej używanym zdarzeniem jest onChange dla pól wejściowych. Jego obsługę należy typować za pomocą React.ChangeEvent<HTMLInputElement>.

function SearchInput() {
  const [value, setValue] = useState('');

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

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

Typowanie onClick

Kliknięcia przycisków używają typu React.MouseEvent<HTMLButtonElement>. Dzięki pełnemu typowaniu można korzystać z e.currentTarget, e.preventDefault() i e.stopPropagation().

function DeleteButton({ onDelete }: { onDelete: () => void }) {
  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.stopPropagation();
    onDelete();
  };
  return <button onClick={handleClick}>Delete</button>;
}

Typowanie onSubmit

Do obsługi przesłania formularza używa się React.FormEvent<HTMLFormElement>. Należy zawsze wywołać e.preventDefault(), aby zatrzymać domyślną nawigację przeglądarki.

function LoginForm() {
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const form = e.currentTarget;
    const email = (form.elements.namedItem('email') as HTMLInputElement).value;
    console.log(email);
  };
  return (
    <form onSubmit={handleSubmit}>
      <input name="email" />
      <button type="submit">Login</button>
    </form>
  );
}

Typowanie zdarzeń klawiatury

Do typowania handlerów klawiatury należy używać React.KeyboardEvent<HTMLElement>. Dzięki temu można bezpiecznie korzystać z e.key, e.code i e.ctrlKey.

function CommandInput() {
  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter' && e.metaKey) {
      submitCommand();
    }
  };
  return <input onKeyDown={handleKeyDown} />;
}

useRef dla elementów DOM

Typ elementu HTML należy przekazać jako parametr generyczny do useRef i zainicjalizować referencję wartością null. TypeScript będzie wtedy wiedzieć, że referencja przechowuje element tego typu.

function AutoFocusInput() {
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    inputRef.current?.focus();
  }, []);

  return <input ref={inputRef} />;
}

Zmienna referencja a referencja DOM

Podczas przechowywania zmiennej wartości, a nie węzła DOM, należy zainicjalizować useRef wartością zamiast null. TypeScript wywnioskuje wtedy zmienny MutableRefObject.

// DOM ref (read-only current)
const divRef = useRef<HTMLDivElement>(null);

// Mutable ref (read-write current)
const countRef = useRef<number>(0);
countRef.current += 1; // ✓ no TypeScript error

Typowanie useImperativeHandle

Podczas udostępniania API referencji z komponentu potomnego należy zdefiniować interfejs uchwytu i użyć go zarówno w forwardRef, jak i w useImperativeHandle.

interface DialogHandle {
  open: () => void;
  close: () => void;
}

const Dialog = forwardRef<DialogHandle, { title: string }>((props, ref) => {
  useImperativeHandle(ref, () => ({
    open: () => console.log('open'),
    close: () => console.log('close'),
  }));
  return <div>{props.title}</div>;
});

Callbacki referencji

Callback referencji otrzymuje element DOM lub null. Należy go typować jako (node: HTMLElement | null) => void.

function MeasureDiv() {
  const [height, setHeight] = useState(0);

  const measuredRef = (node: HTMLDivElement | null) => {
    if (node) setHeight(node.getBoundingClientRect().height);
  };

  return <div ref={measuredRef}>Content: {height}px tall</div>;
}

target a currentTarget zdarzenia

e.target to element, który wywołał zdarzenie, a e.currentTarget to element, do którego podłączono handler. Należy rzutować e.target, gdy potrzebne są konkretne właściwości.

const handleClick = (e: React.MouseEvent<HTMLUListElement>) => {
  const target = e.target as HTMLLIElement;
  console.log(target.dataset.id);
};

Generyczny typ handlera zdarzeń

Aby tworzyć wielokrotnego użytku funkcje obsługi zdarzeń, należy użyć typu generycznego React.EventHandler<Event> albo zapisać pełną sygnaturę funkcji bezpośrednio.

type InputChangeHandler = React.ChangeEventHandler<HTMLInputElement>;

const logChange: InputChangeHandler = (e) => {
  console.log(e.target.value); // e is fully typed
};

Szybkie sprawdzenie

Jakiego typu TypeScript należy użyć dla useRef, który przechowuje HTMLInputElement?

Podsumowanie

Należy typować handlery zdarzeń za pomocą parametrów generycznych React.ChangeEvent, React.MouseEvent i React.FormEvent. Referencje DOM należy typować za pomocą useRef<HTMLElement>(null), a zmienne referencje — za pomocą typu przechowywanej wartości. W przypadku imperatywnych API należy używać forwardRef z jawnym interfejsem uchwytu.

Często zadawane pytania

Czy lekcja „Typowanie zdarzeń i refów w TypeScript” jest bezpłatna?

Tak — pełny tekst „Typowanie zdarzeń i refów w TypeScript” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Typowanie zdarzeń i refów w TypeScript”?

Używanie generyków React.ChangeEvent, React.MouseEvent i RefObject podczas interakcji z DOM. Ćwiczysz React Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć React Academy?

Nie wymagamy żadnego doświadczenia. React Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Typowanie zdarzeń i refów w TypeScript”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji React Academy?

Tak. Każda lekcja React Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Typowanie propsów i typów zwracanych przez komponenty
  2. Typowanie zdarzeń i refów w TypeScript
  3. Komponenty generyczne i typy narzędziowe
  4. Typowanie kontekstu i Custom Hooks
← Powrót do React Academy