Interakcja z komponentami React.js

Ten wpis jest 7 częścią z 39 w kursie React.js
wp-content/uploads/2017/10/React_logo_wordmark-300x101-1-e1508612391308.png
  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 Naucz się React na szkoleniu z Type of Web!

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!

Nawigacja po kursie:
  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