Nowoczesny React: Biblioteka Formik

0:00Nasz formularz jest w tym momencie dość prosty.

0:02Mamy tylko name'a, którego możemy sobie tutaj uzupełnić i możemy wysłać.

0:06Jednak już na tym etapie.

0:08Gdybyśmy chcieli na przykład zrobić walidację, moglibyśmy

0:12natrafić na pewne problemy.

0:13Gdyby tych pól było więcej, gdyby formularz był bardziej rozwinięty,

0:17gdybyśmy sobie wyobrażali sytuacje, w których nie tylko do naszych osób mamy

0:21imiona, ale na przykład dopisujemy adresy mailowe, czyli idziemy poziom wyżej z tą

0:25aplikacją i rozsyłamy maile, że ma miejsce nowa impreza Exchange of Gifts.

0:31No i wtedy każda z tych osób ma swój adres mailowy.

0:34No to tutaj musielibyśmy mieć kolejne pole do walidowania i zaczynałyby

0:38się robić schody.

0:39Oczywiście moglibyśmy to rozegrać JustState'em i takim controlformem i każdy

0:45z tych elementów moglibyśmy w ten sposób przedstawić jako pewien zakres

0:49stanu, który aktualizowalibyśmy.

0:52Natomiast chcę pokazać Ci bibliotekę Formik.

0:54Ta biblioteka służy do obsługi formularzy i pozwoli nam bardzo łatwo nie tylko na

1:00to, żebyśmy nie musieli już pisać np.

1:03Event Submit, ale również będziemy mogli sobie później w następnej

1:06lekcji walidować formularz.

1:09Zobaczymy sobie, jak to zrobić.

1:11Zobaczmy więc ten komponent.

1:13Formik ten komponent.

1:14Gdybyśmy sobie zainstalowali bibliotekę formik, dostajemy go i on ma dość dziwną

1:18składnię, dlatego, że tutaj jako child przyjmuje tylko jeden element i

1:24tym jednym elementem jest function.

1:26Tak jak widzisz tutaj mamy tutaj wzorzec function as childComponent, czyli jak

1:31gdyby twórca biblioteki stosuje taki zapis.

1:34Ten zapis w niczym nam nie przeszkadza.

1:36Chcę tylko, żebyś był zaznajomiony, że może się coś takiego pojawić.

1:40Możesz coś takiego spotkać w innych bibliotekach również, natomiast tutaj

1:43generalnie dostajemy wszystkie propsy, które potrzebujemy, żeby ustawić do

1:47naszego formularza i nasz formularz musi być po prostu czymś takim opakowany, takim

1:52właśnie komponentem Formik razem z tym function child.

1:55I dopiero tutaj będzie nasz JSX, który mamy do tej pory, ale wtedy jeśli

2:00prześlemy handleSubmit handleChange Blur.

2:02No i tutaj musimy spełnić warunek, że ten input musi mieć name.

2:07No to wtedy jak gdyby Dostaniemy chociażby informacje na temat ewentualnych błędów.

2:12Jeśli wczepimy walidację i będziemy mogli zobaczyć sobie jak to funkcjonuje i jakie

2:17podaje nam dodatkowe informacje na temat tego formularza.

2:20Zainstalujmy Bibliotekę form i zobaczmy jak to użyć dla naszego formularza.

2:25Na początku uruchamiam terminal i npm install form i muszę odświeżyć swój page.

2:34I to tutaj opakujemy to właśnie tym komponentem For me.

2:38Mamy tutaj initial values i onSubmit onSubmit.

2:42Chcielibyśmy, żeby to było to nasze handle submit, czyli tutaj możemy to przesunąć.

2:47Natomiast formik sam z siebie będzie miał właśnie tą function asChild.

2:52Wygląda to tak, że mamy tutaj po prostu nawiasy cząsteczkowe i

2:57dostajemy tutaj funkcję.

2:58Możemy rozpisać to sobie jako props albo form props i tutaj będziemy mieli JSX.

3:05Więc to jest całe to nasze opakowanie od form.

3:08Spróbujmy sobie to przesunąć dokładnie w to miejsce.

3:12I tutaj mamy insza walutę.

3:14Może być jakimś pustym obiektem na ten moment.

3:17I teraz mamy formprops.

3:19I tutaj musimy mieć handle submit.

3:22Podobnie jak mamy tutaj.

3:24Czyli zauważ, że będziemy wprowadzać coś takiego.

3:27Teraz onChange będzie wyglądało inaczej, bo mamy tutaj props handle change,

3:32więc nie przejmujemy się tym sami.

3:34Nie potrzebujemy teraz tego state'u.

3:37Zamiast tego będziemy mieli coś, co będzie symbolizowało nasz initial values.

3:42Tutaj możemy sobie przesunąć po prostu to personname i określić to jako puste.

3:47Pamiętajmy o tym, że to personname musi być w najmie, czyli tutaj

3:50name musimy mieć personname.

3:53Mamy placeholder i potrzebujemy jeszcze value i onBlue.

3:58W naszym przypadku zauważ, że value będzie wyglądało trochę inaczej dlatego, że mamy

4:02props, a dokładnie form props, change, form props, handler, blur i form props.

4:10Dokładnie to będzie values i personname, w tym przypadku personname.

4:15Zaczynamy od pustej wartości.

4:17Tutaj nie będziemy mieli w submit tego personname.

4:20Zamiast tego zauważ, że dostajemy wsubmit values i actions.

4:23I do tego będziemy chcieli się odwoływać.

4:26Czyli mamy tutaj values i actions.

4:28No i spróbujmy sobie na dobry początek to nasze values przedstawić jako consolelog.

4:34I tutaj w Actions będziemy mieli coś takiego jak chociażby reset form.

4:39Teraz tutaj nie mamy informacji na temat tego personname, ale zamiast tego możemy

4:44dostać informację z form props od form IKEA.

4:46Isvalid.

4:48I jeżeli formularz jest zwalidowany, to wtedy podświetla nam się to.

4:52Ponieważ jeszcze nie mamy żadnej walidacji to będzie się świeciło na Opacity 1.

4:57Natomiast jeśli tutaj wpiszemy np. Hello!

4:59Spróbujemy coś dodać, to widzimy, że to powinno dalej działać.

5:03I ta nasza logika addPerson teraz będzie wyglądała troszeczkę inaczej, dlatego, że

5:08pod F12 w konsoli dostaniemy object, który będzie miał personname Hello.

5:12To jest dlatego, że to values zbiera nam jak gdyby cały obiekt, prawda?

5:16Więc teraz powinniśmy sobie to wyłuskać jako value z personname.

5:20Więc Person będzie teraz jako values person name.

5:26Teraz musimy przez chwilę uważać dlatego, że nie walidujemy tego formularza, więc

5:31możemy tutaj wrzucić nawet pustą wartość.

5:33Natomiast jeżeli dopiszemy coś.

5:38I wrzucimy tutaj w People, widzimy, że jest Monika, jest Edmund i John.

5:43I możemy wystartować.

5:45Więc wszystko działa tak, jak do tej pory.

5:47Na razie niewiele się zmieniło.

5:49Widzimy tylko, że zachowaliśmy trochę boilerplate, jeśli chodzi o to,

5:52co było tutaj wcześniej napisane.

5:54Musieliśmy pokombinować z submit i tym, co jest w środku.

5:58Musieliśmy pokombinować z use state.

6:00Natomiast wyobraź sobie, że tych pól byłoby więcej np.

6:0310 15, to wtedy formularz robi się już bardzo skomplikowany.

6:07Wtedy musielibyśmy kombinować.

6:09I jako use state prawdopodobnie użyć obiektu.

6:12Ten obiekt musiałby być kopiowany za każdym razem, gdybyśmy

6:16go sobie updateowali.

6:17No nie wyglądałoby to zbyt szczęśliwie.

6:21A dodatkowo jeszcze zależy nam tutaj na walidacji, którą za chwilę Ci pokażę.