React: Modyfikowanie stanu komponentu

0:00Cześć! W poprzedniej lekcji zaczęliśmy tworzyć nasz komponent klasowy. Mamy

0:04już zadeklarowany state, czyli nasz stan. Mamy też funkcję, która obsługuje

0:08nam event, wykonywany na naszym input'cie przy evencie Change. Więc

0:13jeśli ten Change jest w końcu wywoływany, poprzez jakąś zmianę w tym

0:17miejscu, to uruchamiana jest ta właśnie funkcja, która

0:21loguje nam, póki co, tylko Change. Ale za każdym razem, kiedy jakiś

0:25event w JavaScript'cie jest wykonywany, wtedy wysyłany jest także taki

0:30obiekt event, który zawiera wszystkie informacje dotyczące tego

0:34event'u. Zawiera on także wartość naszego input'a. Znajduje

0:38się ona pod kluczem target.value, więc jeśli przekazalibyśmy

0:42ten event, jako parametr do naszej funkcji handleChange - w tym miejscu,

0:47to moglibyśmy

0:51go wylogować, dostając się właśnie do target.value i

0:55w tym miejscu, jeśli wpiszemy

0:59coś w naszym input'cie, to zobaczymy w konsoli dokładny wynik tego, co wpisaliśmy. Jak

1:06widzisz za każdym razem, kiedy event Jest wywoływany, logowany

1:11jest kolejny wynik z naszego event'a. Więc

1:16to co chcielibyśmy teraz zrobić, to wpłynąć na to, jak

1:20wygląda nasz state, wywołując odpowiednią funkcje, właśnie tym miejscu

1:24i podając nową wartość state'u, znajdującą

1:29się w naszym event.target.value. Może brzmi to skomplikowanie, ale tak naprawdę

1:33jest bardzo proste. Prawdopodobnie pierwsza myśl, jaka przychodzi CI do głowy - jak

1:37moglibyśmy zmienić nasz state, to przez stworzenie czegoś takiego jak this.state.text

1:44równa się i tutaj event.target.value.

1:48Niestety ten sposób nie zadziała, bo jak zobaczysz,

1:53jeśli wpiszemy coś tutaj w tym miejscu, a pamiętaj że nasz

1:57H1 wyświetla nam obecny state, to nic się nie zmienia. Wynika

2:01to z tego, że nasz komponent, po prostu, nie jest renderowany ponownie. Musimy do tego wykorzystać

2:05specjalną metodę, którą udostępnił nam React. Nazywa się ona setState

2:10i żeby ją wykorzystać, musimy najpierw podać this, ponieważ musimy

2:14pokazać do się odwołujemy - setState, wewnątrz funkcji setstate

2:18używamy obiektu, który jest po prostu odzwierciedleniem

2:23obiektu w tym miejscu. Podajemy jaki klucz z naszego state'u chcemy zmienić. W

2:27tym wypadku mamy tylko jeden klucz - jest to tekxt. I podajemy tutaj nową

2:31wartość dla naszego state'u. W tym przypadku będzie to event.target.value,

2:36czyli zawartość naszego input'a, podawana w evencie, w tym

2:40miejscu. Pamiętaj, że to że nazywamy to event, nie ma żadnego znaczenia. Mogłoby

2:45się to nazywać, na przykład i, czy też e. Taka

2:49jest konwencja, też nazewnicza. Zazwyczaj właśnie e, widzimy jako event, podawane

2:54jako parametr do funkcji. I w tym momncie, jeśli zmienimy coś naszym

2:58inpucie, to otrzymamy błąd. Dlaczego otrzymaliśmy błąd?

3:02Taged, zjadłem

3:06literkę. Zdarza się. Okej, teraz powinno działać. Tak,

3:12wszystko jest okej, ale żeby stworzyć prawdziwy controlled component,

3:16musimy zrobić jeszcze jedną rzecz. Wyobraźmy sobie, że nasza

3:20funkcja handleChange jest nieco bardziej skomplikowana. Na przykład wymusza na użytkowniku

3:24stworzenie nazwy składającej się wyłącznie z dużych liter i nie

3:28można tego zrobić inaczej. W sensie użytkownik nie ma absolutnie żadnej możliwości

3:32wpisania małych liter. W takiej sytuacji, najłatwiej będzie, skoro

3:36już w tym miejscu pobieramy sobie wartość naszego input'a i wklejamy

3:40ją, czy też właściwie podmieniony nasz state na nową wartość w tym miejscu. Dobrze

3:46było by podmienić zawartość input'a na zawartość naszego state'u -

3:50wtedy kolejność byłaby taka, że najpierw odpala się event, event podmienia state, state podmienia

3:55value w naszym inpucie. Więc teraz tutaj piszemy

4:00this.state.text i załóżmy,

4:05że chcielibyśmy żeby tu było toUppercase. I w

4:10tym momencie widzimy, zanim cokolwiek zmienimy, że nasz placeholder zniknął, ponieważ nasz

4:14import posiada już jakąś inicjalną wartość, więc teraz jeśli ją usuniemy,

4:18to widzimy, że on się znowu pojawi. Troszkę

4:24powiększy nasz widok. I tym momencie, jeśli coś wpiszę, to

4:28ta funkcja sprawi, że wszystko będzie napisane wielką literą i wszystko

4:34działa. W ten sposób stworzyliśmy tak zwany controlled component, który podaje

4:38nam wartość w evencie. Ta wartość w evencie podmienia nam state, a state

4:43wpływa na wartość naszego input'u. Na pierwszy rzut oka, może się

4:47to wydawać bardzo skomplikowane i bardzo takie na około, ale uwierz

4:51mi, że w przyszłości, w dalszej części budowania tej aplikacji, tego typu

4:55rozwiązanie naprawdę ułatwia nam życie. To tyle w tym odcinku i zapraszam

4:59kolejnej lekcji.