Interakcja z komponentami React.js

1. React.js: Wprowadzenie do kursu od podstaw
2. Poznaj React.js
3. Pierwszy komponent w React.js
4. Props czyli atrybuty w React.js
5. Podział na komponenty w React.js
6. Klasy jako komponenty React.js
7. Interakcja z komponentami React.js
8. Stan komponentów React.js
9. State w React.js 2
10. Metody cyklu życia komponentu w React.js
11. React.js w przykładach: filtrowanie statycznej listy
12. Tworzenie aplikacji React.js dzięki create-react-app
13. React.js na GitHub Pages dzięki create-react-app
14. Testowanie aplikacji React.js — podstawy Enzyme
15. Testowanie React.js w Enzyme — props, state i interakcje
16. Poprawne bindowanie funkcji w React.js
17. Odpowiadam na pytania: Babel, ECMAScript, destrukturyzacja, onClick, className
18. Komunikacja pomiędzy komponentami w React.js
19. Komunikacja z API w React.js
20. Formularze w React.js — kontrolowane komponenty
21. Formularze w React.js — niekontrolowane komponenty
22. Odpowiadam na pytania: props, nawiasy klamrowe, funkcje vs klasy, import react
23. TDD w React.js z pomocą react-testing-library
24. Flux i Redux: globalny store i jednokierunkowy przepływ danych
25. React + Redux — kurs: wprowadzenie i podstawy
26. React + Redux — filtrowanie listy, proste selektory
27. Projektowanie komponentów: Presentational & Container Components
28. Asynchroniczność w Redux: redux-thunk
29. Kiedy używać state, a kiedy Redux?
30. Nowe metody cyklu życia: getDerivedStateFromProps i getSnapshotBeforeUpdate
31. Leniwe ładowanie komponentów w React dzięki import
32. Higher Order Reducers — Redux i powtarzanie kodu
33. React Hooks — wprowadzenie i motywacja
34. React Hooks: useState, czyli stan w komponentach funkcyjnych
35. React Hooks: useState — wiele stanów, callbacki i inne niuanse
36. React Hooks: useEffect — efekty uboczne w komponencie
37. React Hooks a żądania do API
38. useReducer — przenoszenie logiki poza komponent
39. useMemo, useCallback, czyli rozwiązanie problemów ze zmieniającymi się propsami

Tworzenie aplikacji nie miałoby sensu, gdyby użytkownik nie mógł wchodzić z nią w interakcje 🙂 Dzisiaj nauczysz się obsługiwać zdarzenia wywoływane przez użytkowników: Kliknięcia, najechania kursorem, zmiany tekstu w polu tekstowym… oczywiście w React.js.

Zdarzenia w JS

Wszystkie interakcje użytkownika z aplikacją w przeglądarce opierają się o zdarzenia. W czystym JS, aby takie eventy móc obsługiwać, używamy przeznaczonych do tego funkcji, które tworzą i usuwają tzw. event listenery. Robi się to na przykład przez funkcję addEventListener oraz removeEventListener:

const element = document.querySelector('.my-element');
element.addEventListener('click', () => {
  alert('Kliknięto!');
});

Taki kod powoduje, że za każdym razem gdy użytkownik kliknie w element o klasie .my-element to zostanie wyświetlony alert z komunikatem. Super, prawda? To już znamy. A gdzie React?!

Zdarzenia w React

Zdarzenia w React obsługuje się całkowicie deklaratywnie. Nie musisz pisać tego brzydkiego imperatywnego kodu jaki widzisz powyżej. Nie musisz się też martwić tym, aby w odpowiedniej chwili odpiąć zdarzenia gdy komponent jest niszczony — react robi to za Ciebie.

No ale jak? Poprzez proste i łatwe do zapamiętania atrybuty wprost na elementach! Powyższy przykład w React wyglądałby tak:

function MyComponent() {
  return (
    <button onClick={() => alert('Kliknięto!')}>Kliknij!</button>
  );
}

Jak widzisz, dodaję na elemencie prosty atrybut onClick, który reaguje na kliknięcia. Zobacz sam(a):

See the Pen Props czyli atrybuty w React.js by Michał Miszczyszyn (@mmiszy) on CodePen.

Inne zdarzenia React

Podobnych zdarzeń w React jest bardzo wiele. Najpopularniejsze to:

• onClick
• onChange
• onInput
• onMouseOver
• onMouseEnter
• onDragStart
• …

I tak dalej, i tym podobne. Listę wszystkich eventów w React można znaleźć tutaj: Dokumentacja SyntheticEvent.

Obsługa zdarzeń w React.js

Jak widać na powyższym przykładzie, zdarzenia obsługuje się poprzez przekazanie do atrybutu funkcji. Ale czy taki zapis to jedyna możliwość? Oczywiście nie! Nie musisz przecież tworzyć funkcji wewnątrz JSX, a wręcz jest to niewskazane. Najlepiej funkcję zdefiniować wcześniej i dalej tylko się do niej odwołać:

function onClickHandler() {
  alert('Kliknięto!');
}
function MyComponent() {
  return (
    <button onClick={onClickHandler}>Kliknij!</button>
  );
}

Tutaj przydatna okazuje się często możliwość definiowania metod w klasie:

class App extends React.Component {
  render() {
    return <button onClick={this.onClickHandler}>Kliknij!</button>;
  }
  onClickHandler() {
    alert("Kliknięto!");
  }
}

Możesz się tutaj natknąć na problem z this, ale temat na jeden z kolejnych wpisów. Z tym też sobie poradzimy 🙂

Event w React.js

Standardowo w JS do event-listenerów przekazywany jest obiekt (zwyczajowo nazywany event lub w skrócie e). Zawiera on informacje o zdarzeniu. Pozwala także przerwać propagację (stopPropagation) lub zapobiec wykonaniu domyślnych akcji (preventDefault). Jak to wygląda w React.js? Podobnie, ale nie dokładnie tak samo.

Każda funkcja przekazana jako atrybut do nasłuchiwania na zdarzenia, zostanie wywołana z obiektem typu SyntheticEvent. Cóż to za twór? Jest to Reactowa implementacja, która przede wszystkim jest identyczna niezależnie od przeglądarki — a to ogromna zaleta! Obiekt ten również posiada metody takie jak preventDefault czy stopPropagation, a także wiele różnych pól, np:

• currentTarget
• target
• bubbles
• timeStamp
• type

Oraz wiele innych, w zależności od rodzaju konkretnego zdarzenia. Dodatkowo każdy taki obiekt ma jeszcze własność nativeEvent, która pozwala na dobranie się do natywnej implementacji eventów w danej przeglądarce (jeśli potrzebujesz). Konkretne informacje w linkowanej już dokumentacji SyntheticEvent.

Czy to nie jest mega proste? Jeśli czegoś nie rozumiesz to koniecznie Poznaj React na szkoleniu!

Jeśli chcesz na bieżąco śledzić kolejne części kursu React.js to koniecznie śledź mnie na Facebooku i zapisz się na newsletter.

Ćwiczenie

Ćwiczenie: Napisz aplikację, która nasłuchuje na wiele różnych zdarzeń i loguje je do konsoli. Podziel się kodem w komentarzu!