Interakcja z komponentami React.js

Ten wpis jest 7 częścią z 41 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
  40. Wady React Hooks
  41. React Hooks: Piszemy własne hooki!

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.

Nie wysyłamy spamu, tylko wartościowe informacje. W każdej chwili możesz się wypisać klikając „wypisz się” w stopce maila.

Ć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
  40. Wady React Hooks
  41. React Hooks: Piszemy własne hooki!

Nie wysyłamy spamu, tylko wartościowe informacje. W każdej chwili możesz się wypisać klikając „wypisz się” w stopce maila.

Subscribe
Powiadom o
guest
11 komentarzy
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Retrypl
Retrypl
2 lat temu

Cześć! Czy można obsłużyć dwa zdarzenia jednym ‚onClickiem’? Zaraz za this.onClickHandler dodałem po przecinku this.MouseOver i teraz zamiast dwóch funkcji wykonuje się tylko MouseOver a onClickHandler jest ignorowana 🙂
PS Czekam na następne części, robi Pan świetną robotę!

Michal Jaracz
Michal Jaracz
2 lat temu

Cześć !! Na początku chciałem ci podziękować za wszystko co robisz, super sprawa!!
Poza tym mam pytanie, związane z Reactem, ale nie koniecznie z kursem..

Chcę aby elementy li, renderowały się, po kliknięciu na link który w kodzie ma klase „header__linkCategory”. Ogarnąłem to w taki sposób jak widać w na github’ie .. Tylko nie rozumiem czemu po kliknięciu, odświeża się cała strona, zamiast tak jak to w React, renderowania tylko zmienianego elementu, będę bardzo wdzięczny za pomoc 🙂 Pozdrawiam!! (fragment kodu o którym pisze jest w pliku AppHeader.js, dotyczy linijki 73)
https://github.com/mjaracz/ReactBags

Michal Jaracz
Michal Jaracz
2 lat temu

Dzięki, za wyjaśnienie, trochę na szybko pisałem ten fragment stąd takie błędy 😉 pozmieniam i wszystko uporządkuje

Łukasz Marcinek
Łukasz Marcinek
2 lat temu

Taak ! 🙂 probowałem podpiąć 2 buttony 🙂 i ignorowany się 🙂
pojawiał sie klasyczny błąd w consoli.
po opakowaniu tego w div. problem znikł.
Czy za każdym razem muszę używać div ?

Michał
Michał
1 rok temu

Rezultat mojego ćwiczenia: https://codesandbox.io/s/github/Michnet/interaction-with-react-component/tree/master/

Dodałem logowanie na konsole wraz z zapamiętywaniem co zostało już zalogowane oraz zliczanie ilości zduplikowanych zalogowanych komunikatów 😀

Mam nadzieję, że komuś się przyda w pierwszych krokach z reactem 😀

Joanna Trapp
Joanna Trapp
1 rok temu

Dodałam parę zdarzeń w kodzie z poprzedniego ćwiczenia, wszystko śmiga, więc chyba wystarczy 😉

pwinnicki
pwinnicki
1 rok temu

W onclick można też przekazać argumenty jak się wykorzysta funkcję strzałkową z ES6, tutaj wyświetlamy np. alert z oddzielonymi pionowymi kreskami departamentem, imieniem oraz klasą CSS klikanego elementu:

class App extends React.Component {
render() {
return Kliknij!;
}
wyswietlAlert = (departament, imie) => e => {
alert(departament + ” | ” + imie + ” | ” + e.currentTarget.className);
};
}