React: Tworzenie inteligentnego formularza

0:00Cześć! W tej lekcji kontynuujemy nasz wielki plan. I tym razem musimy

0:04dopasować form.js do nowych potrzeb. Jakie to są nowe potrzeby? Popatrz,

0:08stara funkcja addItem zawierała taką logikę. Pod

0:13kluczem name zapisywaliśmy pierwszy element z tablicy, a właściwie jego wartość. Pod

0:17twitterLink zapisywaliśmy drugi element, później trzeci i czwarty. Jak

0:22sobie spojrzymy na nasz formularz, to w przypadku Twitter'ów, faktycznie tak to działało. Mieliśmy

0:27pierwszy, to było imię, drugi to był link. Trzeci obrazek i czwarty,

0:32to był opis. Dopóki mieliśmy tego typu konstrukcję, nie

0:36musieliśmy tutaj nic zmieniać i mogliśmy polegać na takiej, powiedzmy, imperatywnej

0:40logice. Natomiast w momencie, kiedy sprawy zaczęły się nieco komplikować i zaczęliśmy

0:44zmieniać sobie kształt naszego formularza, w zależności od typu notatki,

0:48które dodajemy w naszej aplikacji, to kolejność tych pól również się zmienia. Bo

0:53teraz, na przykład, pierwszym polem jest tytuł. Drugim polem jest link,

0:57ale trzecim polem nie jest obrazek, tak jak w przypadku Twittera, tylko od razu description. Więc

1:02to, co chcemy zrobić, to zmienić logikę naszego form'a. Wykorzystać już fakt,

1:07że on jest klasą i zawiera w sobie state, więc możemy tym state'em łatwo

1:11manipulować. Możemy tutaj stworzyć, tak zwane, controlled components, o których

1:15mówiłem w pierwszych częściach tego kursu, czyli taki rodzaj

1:19input'u, który wpływa na to, co znajduje się w state'cie. A state wpływa na

1:23to, co znajduje się w input'cie. Dzięki temu, będzie mieć pełną nad tym, co wpisujemy

1:27naszym form'ie, w którym miejscu to znajduje, pod jakim kluczem to jest w naszym state'cie. A

1:32ostatecznie, po naciśnięciu submit, będziemy wysyłać cały

1:36taki obiekt z gotową notatką i już później będziemy się tym zajmować dalej

1:40w naszym root'owym widoku. Brzmi ciekawie? Zaczynamy. Pierwsze,

1:45co zrobimy, to zmodyfikujemy sobie trochę nasz stan. Sprawdźmy, jakie mamy rodzaje

1:49notatek. Jakie mamy pola w formularzu. Powiedzmy,

1:53że takim uniwersalnym polem dla name, będzie title,

1:58ponieważ w dwóch przypadkach właśnie jest to title, a w

2:02jednym name. Dla każdego pola stworzymy sobie taką pustą

2:06wartość. Mamy title, link, image

2:10i description. I te pola chcemy modyfikować,

2:14poprzez nasze input'y, które mamy w tym miejscu. Żeby to

2:19zrobić, musimy delikatnie zmodyfikować nasz input. W przypadku

2:24komponentu radio, pokazałem ci jedną z możliwości, czyli przekazywanie

2:28funkcji, którą następnie wewnątrz radio, przypisujemy

2:33do onChange. Jest to droga trochę taka na około, bo można

2:37to zrobić jeszcze prościej i właśnie ten drugi sposób pokażę Ci

2:42tutaj, na przykładzie inputów. Weźmiemy sobie każdy input, który mamy. Wpiszemy

2:51tutaj onChange. Nazwiemy sobie to handleInputChange. Stylowaniem

2:58kodu się nie martwimy, bo zrobimy sobie autoformatowanie. Okej, już jest

3:03dobrze. Teraz musimy stworzyć tę metodę, bo jeszcze jej nie mamy. Do

3:13niej będziemy przekazywać event. Zaraz pokażę Ci dlaczego. Na razie po prostu zrobimy

3:17console.log(e.target.name)

3:22i żeby to zadziałało, to

3:26musimy zrobić jeszcze jedną bardzo ważną rzecz. Pewnie już się domyślasz jaką, na

3:31tym etapie kursu, jest to prawie, że oczywiste. Musimy wejść do naszego input'u,

3:35ponieważ jest on custom'owym komponentem i nie

3:39ma przekazanego props'a onChange, więc żeby on

3:43zaczął działać, to musimy go tutaj przekazać. Możemy go przekazać, po prostu,

3:48w ten sposób lub możemy wykorzystać props'y

3:53z użyciem spread operator'a i wtedy to są props'y, które

3:57przekazaliśmy, oprócz tego, co zadeklarowaliśmy tutaj po imieniu, czyli

4:02na przykład, onChange, onClick i wszelkiego rodzaju event'y, które mogą

4:06się gdzieś tam pojawić w aplikacji, których nie wymieniliśmy tutaj bezpośrednio. One

4:11wszystkie zostaną zachowane w tym miejscu, w tym props. Jak

4:15teraz podamy to w ten sposób, to one zostaną przypisane

4:20tego tagu, tutaj. Ten tag jest dynamiczny. Pamiętaj, on się będzie nazywał

4:24albo textarea albo input, w zależności od tego, jakiego props'a podaliśmy

4:28tutaj, w tym miejscu. Nieźle nam się skomplikował

4:33ten komponent. Wygląda całkiem imponująca, ale

4:37teraz chwila prawdy. Sprawdźmy, czy nasze komponenty

4:41działają poprawnie. Mamy, super. Mamy

4:46wszystko tak trzeba. Jedną

4:50rzecz tutaj zmienimy - name zmienimy na title i to wynika

4:58to faktu, że będziemy się za chwilkę odnosić, po tych nazwach,

5:02które mamy w props'ie name, do kluczy w naszym state'cie. Więc

5:08musi być identyczne, musi być title, link, image i description. Sprawdźmy, czy reszta

5:12się zgadza - title, link, image, description. Wszystko

5:17jest okej, więc teraz możemy napisać naszą funkcję, która

5:21będzie modyfikować stan i posłużymy się tutaj takim całkiem

5:25sprytnym rozwiązaniem, bo zobacz, że mamy tutaj pewien problem. Mamy

5:29jedną funkcję, jedną metodę, którą podajemy do czterech różnych input'ów. Czterech input'ów,

5:35które mają zmieniać cztery różne wartości naszego state'u.Jak moglibyśmy

5:39to zrobić, bez tworzenia czterech różnych metod, czyli na przykład handeNameChange, handleLinkChange

5:46i tak dalej, bo przecież jak spojrzysz sobie tutaj, no to w tym

5:50setState to jest banalnie. Ustawiamy tylko jedną wartość naszego state'u, a tutaj

5:54chcemy, przy okazji, jednej metody zmienić cztery wartości w

5:58zależności od tego, które pole wypełniamy w naszym formularzu. I kluczem

6:03do tego, dosłownie kluczem jest tutaj to, bo

6:07target.name - to są właśnie te wartości, w

6:11tym miejscu, title, link i tak dalej. I one

6:15z racji, że mają takie same nazwy, jak nasze klucze w state'cie, mogą

6:19zostać wykorzystane właśnie jako taki dynamiczny klucz funkcji

6:24setState. Jak sobie

6:28napiszemy tę funkcję, to wystarczy, że wrzucimy to w nawiasy kwadratowe,

6:32a w tym miejscu stworzymy

6:38value, czyli będziemy podawać wartość

6:42input'a do dynamicznego klucza, który jest taką

6:46samą nazwą, jak na przykład title, jeśli wpisujemy title. Taką

6:51samą nazwą, jeśli wpisujemy image i to się automatycznie wtedy będzie

6:55uzupełniało. Popatrz - cztery linijki kodu, który

7:00zaoszczędziły nam jakichś if'ów, jakichś dodatkowych metod,

7:04które musielibyśmy pisać. Bardzo fajne są takie rozwiązanie w JavaScript'cie. Zawsze

7:08doceniam, jeśli ktoś tak pisze kotkod, który jest po prostu bardzo krótki i bardzo czytelny.

7:12Zresztą podobne rozwiązanie mieliśmy już tutaj w przypadku tego dynamicznego klucza

7:16do descriptions. Tutaj też odwoływaliśmy się poprzez dynamiczne klucz

7:21types, do odpowiednich wartości w naszym const'cie descriptions. Ale,

7:25jeśli dobrze pamiętasz, dobrze działało controlled components, to pewnie pamiętasz,

7:29że do naszych inputów musimy podać jeszcze jedną wartość, bo funkcja to

7:33jest jedno, ale wtedy już nie input mówi

7:37jakie ma value, tylko to state mówi input'owi, jakie value ma

7:41mieć, po wykonaniu tej metody - handluInputChange, czyli tworzymy taką

7:45zamkniętą pętlę, wtedy ten input jest kontrolowany przez nas, a nie

7:49my go słuchamy. Więc teraz pod naszą funkcją

7:54onChange, event'em, właściwie nie funkcją. Piszemy

7:59sobie value, this.state i teraz

8:03po kolei. Tutaj title, tutaj link, image

8:09i description. I tutaj

8:14mamy kolejny przykład na to, że podaliśmy nowego props'a, ale racji, że nasz input już

8:18sobie destrukturyzuje te rest props, które pozostały, które nie wymienialiśmy

8:22po imieniu w naszym komponencie i dodaliśmy właśnie tutaj value, które jest

8:26nową wartością, którego nie destryktuzowaliśmy w naszym input. Nie

8:32ma go tutaj nigdzie, ale jest ten props i on dzięki temu, że ma ten props, to

8:36już będzie wiedział, że to value jest kolejnym props'em, podanym do tego komponentu. Żeby

8:43się upewnić, że to działa, zrobimy sobie coś takiego. Piszemy

8:49tutaj console.log'a i zrobimy taki

8:53troszkę dłuższy console.log. Ja tutaj trochę przyspieszę. Okej, teraz

8:59będziemy logować wszystkie klucze i będziemy widzieć na żywo, w czasie

9:03rzeczywistym, jak one się zmieniają, więc teraz chwila prawdy. Title

9:10działa, link działa, image działa

9:14i description działa. Więc mamy wszystko gotowe. Nasz

9:18formularz działa jak trzeba i możemy przystąpić do dalszego rozwoju naszej aplikacji.