- React.js: Wprowadzenie do kursu od podstaw
- Poznaj React.js
- Pierwszy komponent w React.js
- Props czyli atrybuty w React.js
- Podział na komponenty w React.js
- Klasy jako komponenty React.js
- Interakcja z komponentami React.js
- Stan komponentów React.js
- State w React.js 2
- Metody cyklu życia komponentu w React.js
- React.js w przykładach: filtrowanie statycznej listy
- Tworzenie aplikacji React.js dzięki create-react-app
- React.js na GitHub Pages dzięki create-react-app
- Testowanie aplikacji React.js — podstawy Enzyme
- Testowanie React.js w Enzyme — props, state i interakcje
- Poprawne bindowanie funkcji w React.js
- Odpowiadam na pytania: Babel, ECMAScript, destrukturyzacja, onClick, className
- Komunikacja pomiędzy komponentami w React.js
- Komunikacja z API w React.js
- Formularze w React.js — kontrolowane komponenty
- Formularze w React.js — niekontrolowane komponenty
- Odpowiadam na pytania: props, nawiasy klamrowe, funkcje vs klasy, import react
- TDD w React.js z pomocą react-testing-library
- Flux i Redux: globalny store i jednokierunkowy przepływ danych
- React + Redux — kurs: wprowadzenie i podstawy
- React + Redux — filtrowanie listy, proste selektory
- Projektowanie komponentów: Presentational & Container Components
- Asynchroniczność w Redux: redux-thunk
- Kiedy używać state, a kiedy Redux?
- Nowe metody cyklu życia: getDerivedStateFromProps i getSnapshotBeforeUpdate
- Leniwe ładowanie komponentów w React dzięki import
- Higher Order Reducers — Redux i powtarzanie kodu
- React Hooks — wprowadzenie i motywacja
- React Hooks: useState, czyli stan w komponentach funkcyjnych
- React Hooks: useState — wiele stanów, callbacki i inne niuanse
- React Hooks: useEffect — efekty uboczne w komponencie
- React Hooks a żądania do API
- useReducer — przenoszenie logiki poza komponent
- useMemo, useCallback, czyli rozwiązanie problemów ze zmieniającymi się propsami
- Wady React Hooks
- 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 w dwa dni 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!
- React.js: Wprowadzenie do kursu od podstaw
- Poznaj React.js
- Pierwszy komponent w React.js
- Props czyli atrybuty w React.js
- Podział na komponenty w React.js
- Klasy jako komponenty React.js
- Interakcja z komponentami React.js
- Stan komponentów React.js
- State w React.js 2
- Metody cyklu życia komponentu w React.js
- React.js w przykładach: filtrowanie statycznej listy
- Tworzenie aplikacji React.js dzięki create-react-app
- React.js na GitHub Pages dzięki create-react-app
- Testowanie aplikacji React.js — podstawy Enzyme
- Testowanie React.js w Enzyme — props, state i interakcje
- Poprawne bindowanie funkcji w React.js
- Odpowiadam na pytania: Babel, ECMAScript, destrukturyzacja, onClick, className
- Komunikacja pomiędzy komponentami w React.js
- Komunikacja z API w React.js
- Formularze w React.js — kontrolowane komponenty
- Formularze w React.js — niekontrolowane komponenty
- Odpowiadam na pytania: props, nawiasy klamrowe, funkcje vs klasy, import react
- TDD w React.js z pomocą react-testing-library
- Flux i Redux: globalny store i jednokierunkowy przepływ danych
- React + Redux — kurs: wprowadzenie i podstawy
- React + Redux — filtrowanie listy, proste selektory
- Projektowanie komponentów: Presentational & Container Components
- Asynchroniczność w Redux: redux-thunk
- Kiedy używać state, a kiedy Redux?
- Nowe metody cyklu życia: getDerivedStateFromProps i getSnapshotBeforeUpdate
- Leniwe ładowanie komponentów w React dzięki import
- Higher Order Reducers — Redux i powtarzanie kodu
- React Hooks — wprowadzenie i motywacja
- React Hooks: useState, czyli stan w komponentach funkcyjnych
- React Hooks: useState — wiele stanów, callbacki i inne niuanse
- React Hooks: useEffect — efekty uboczne w komponencie
- React Hooks a żądania do API
- useReducer — przenoszenie logiki poza komponent
- useMemo, useCallback, czyli rozwiązanie problemów ze zmieniającymi się propsami
- Wady React Hooks
- React Hooks: Piszemy własne hooki!
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ę!
Możesz przekazać do
onClick
jedną funkcję, która wywoła dwie 🙂Dzięki za miłe słowa! 😀
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
Zawsze po kliknięciu w pusty link (tzn.
href=""
) strona się odświeży.Jeśli chcesz temu zapobiec to musisz po prostu wywołać
event.preventDefault()
wonClickHandler
.Swoją drogą to ten fragment kodu nie ma sensu. Po co kilka razy w tym samym momencie ustawiać dokładnie ten sam state? No i dlaczego w ogóle
map
? https://github.com/mjaracz/ReactBags/blob/master/src/AppHeader.js#L39-L42Dzięki, za wyjaśnienie, trochę na szybko pisałem ten fragment stąd takie błędy 😉 pozmieniam i wszystko uporządkuje
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 ?
Komponenty reacta muszą zwracać jeden element lub tablicę. Czyli albo opakowujesz w div, albo zwracasz tablicę buttonów.
Od wersji 16 jest też coś zwanego „fragment”, ale jeszcze o tym nie mówiłem na blogu 🙂
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 😀
Hej! React zaleca, aby nie mutować
state
bezpośrednio. Dlatego nie powinieneś robićprevState.loggedMessages.push(…)
.Dodałam parę zdarzeń w kodzie z poprzedniego ćwiczenia, wszystko śmiga, więc chyba wystarczy 😉
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);
};
}