Interakcja z komponentami React.js

[type-of-web-komentarze[bot]]

Interakcja z komponentami React.js

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.

https://typeofweb.com/interakcja-komponentami-react-js

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Retrypl		2018-01-18 19:02

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ę!

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2018-01-18 19:17

Możesz przekazać do onClick jedną funkcję, która wywoła dwie :)

Dzięki za miłe słowa! :D

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Michal Jaracz		2018-03-14 00:58

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

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2018-03-14 11:19

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() w onClickHandler.

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-L42

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Michal Jaracz		2018-03-14 11:38

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

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Łukasz Marcinek		2018-03-15 13:30

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 ?

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2018-03-15 14:42

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 :)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Michał		2019-01-04 11:27

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 :D

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

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-09-19 17:54

Hej! React zaleca, aby nie mutować state bezpośrednio. Dlatego nie powinieneś robić prevState.loggedMessages.push(…).

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Joanna Trapp		2019-01-30 21:17

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

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	pwinnicki		2019-07-08 15:43

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);
};
}

 
 

Komentarz zaimportowany z WordPressa