React: Renderowanie warunkowe pól formularza

0:00Cześć! Przed nami ostatnia lekcja związana z naszym formularzem. Potem

0:05przejdziemy do innych zagadnień w następnym rozdziale, ale zanim to

0:09zrobimy, to podsumujmy to, co zrobiliśmy w tym rozdziale i jeszcze rzućmy okiem na

0:13nasz formularz i dokonajmy ostatnich tutaj zmian. Przede wszystkim

0:17pewnie widzisz, że ostylowałem nasze radio button'y i celowo nie pokazałem,

0:22jak to zrobić, ponieważ to dzięki własnym próbami i dzięki własnym staraniem najszybciej

0:26nauczysz się React'a, więc jeśli Twoje radio button'y jeszcze nie wyglądają tak, jak te,

0:30to podpowiadam, że warto teraz zatrzymać te lekcje i zrobić

0:34to samodzielnie. Ja tylko podpowiem, że wykonałem

0:38tutaj osobny komponent, który nazywa radio i do niego podaje pewne

0:43props'y. Jeśli chcesz, spróbuj wykonać ten komponent samodzielnie. Jak

0:48widzisz, nie chodziło tu wyłącznie ostylowanie, ale przekazanie pewnych props'ów do

0:52tego komponentu i tak dalej. Jeśli natomiast twoje buttony wyglądają

0:56tak, jak tutaj. Są zgodne design'em i działają poprawnie, to mmożemy zacząć

1:00naszą pracę. Tylko pokażę ci, jak wyglądało moje podejście do stworzenia tego

1:04komponentu, ale pamiętaj, że React daje ogromną swobodę, jeśli

1:08chodzi o tworzenie aplikacji i często nie ma tutaj jednej, słusznej drogi. To,

1:13że mój komponent wygląda w ten sposób, nie znaczy, że twój nie będzie lepszy

1:17od mojego. Popatrzmy zatem, co kryje się w naszym komponencie radio. Jest

1:22to komponent prywatny komponentu form, więc znajduje się tym samym folderze i

1:26jego nazwa pliku to FormRadio. Z niego eksportujemy sobie consta radio, chociaż

1:31jest to export default, więc pamiętaj,że ta nazwa, nie jest dla zobowiązująca,

1:36ale trzymamy się właśnie tej nazwy. To taki szczegół. Wewnątrz

1:41naszego radio destrukturyzujemy sobie props'y, które są podawane przez rodzica

1:45i tutaj zatrzymamy się na chwilę przy dwóch props'ach - changeFn to

1:49jest funkcja, którą podajemy do eventu onChange, ponieważ teraz, to właśnie ten

1:54komponent tutaj generyczny input, jest odpowiedzialny za tę funkcję, a nie

1:58ten zewnętrzny radio, tym miejscu. Tutaj podajemy tylko props'a. Jest

2:02to changeFn. Drugim props'em jest, oczywiście, children, ponieważ wszystko

2:06jest oplecione w label i w tym momencie children będzie, po prostu, tekstem, który wrzucamy

2:11między tagi naszego komponentu, czyli na przykład Twitter, Article albo nawetNote

2:15i z racji, że jest to oplecione w label, to nawet jak klikniemy na tekst, to nasz

2:19radio button się zaznacza. Ale wróćmy jeszcze na chwilę do tego komponentu i spójrzmy,

2:23że mamy tutaj div'a, który nazywa się radio button i to

2:27on właśnie odpowiedzialny jest za to kółko, ponieważ nasz input jest ukryty i

2:32tak to zazwyczaj działa, że jeśli chcemy ostylować sobie jakoś, po

2:37swojemu, radio button'y, to ukrywamy ten generyczny input i zamiast niego, stawiamy

2:41coś innego. Ale przejdźmy teraz do stylów, bo tam się dzieją właśnie dużo ciekawsze rzeczy. Przede

2:45wszystkim nasz radio ma właściwość inline-flex, czyli, z jednej strony,

2:50wyświetla się na jednej linii, ale z drugiej możemy stosować align-items: center. Przez

2:55co, nasze kółko jest zrównane idealnie na osi y z naszym

2:59napisem. Dodatkowo input, jako taki, został schowany, ponieważ zawsze

3:04kiedy stylujemy radio button'y - chcemy schować domyślny

3:08input i stworzyć własny i tutaj właśnie wkracza nasz radio

3:13button, który znajduje się w tym miejscu. On ma 15 pikseli szerokości

3:18i wysokości. Jest oczywiście okrągły, a dodatkowo w momencie

3:22kiedy input jest zaznaczony, a input jak widzisz, wie

3:26o tym, ponieważ przekazujemy mu props'a checked. W CSS'ie natomiast

3:32możemy sprawdzać, czy input jest zaznaczony i jeśli jest, to ten button,

3:36który jest sibling'iem, jest rodzeństwem tego input'a - może

3:41dostać jakieś dodatkowe style i przez to dostaję background-color

3:46i box-shadow na inset'ie z zerowym blur'em i z

3:50takim właśnie wniknięciem do środka, na 2 piksele. Przez

3:54co nasz radio button wygląda w ten sposób. I tylko

3:58jeszcze rzut oka z góry, na finalny komponent.

4:02Jak widzisz, podajemy tutaj tak jak wcześniej, jako id - types

4:07i odpowiedni typ, dla każdego radio button'a. Checked oczywiście

4:11sprawdzamy w taki sam sposób, jak wcześniej. Tutaj, zamiast onChange -

4:16wprowadzamy props'a changeFn, ponieważ sama onChange musi się wydarzyć

4:20w tym miejscu i tutaj podajemy tego props'a - changeFn. Okej, skoro

4:24to już mamy wyjaśnione, to nie pozostaje nam nic innego, jak dopasowanie naszych inputów,

4:28tutaj na dole. Do tego, jaki typ notatki będziemy dodawać w naszej aplikacji i

4:33tak naprawdę zmienią się tutaj trzy rzeczy. Pierwsza

4:37jest taka, że jeśli to nie będzie Twitter, to nie będziemy

4:41dodawać obrazka. Druga jest taka, że jeśli to nie będzie Twitter,

4:46to nasz label nie będzie nazywać się Twitter link, tylko po prostu link

4:50i będzie się wyświetlać tylko w momencie, kiedy będziemy mieć artykuł, bo

4:54jeśli będziemy mieć notatkę, to żadnego linka nie będziemy dodawać. A trzecia

4:59jest taka, że jeśli to nie będzie Twitter, to zamiast name, damy title. Więc,

5:04zacznijmy od najprostszych rzeczy. Będziemy usuwać

5:08obrazek, jeśli nie będzie to Twitter, więc

5:12this.state... Jeśli aktywną

5:16opcją jest Twitter, wtedy

5:21renderujemy input dla naszego obrazka. Jeśli nie, to

5:26renderujemy nic. Sprawdźmy, czy to działa - działa. I

5:30tutaj pojawiła się nowa rzecz, którą pewnie warto wyjaśnić. W takim

5:34renderowaniu warunkowym, kiedy chcemy zwrócić coś albo nic, to pamiętaj,

5:39że w momencie, kiedy chcemy zwrócić nic - możemy wrzucić po prostu nula. Pamiętaj,

5:43że jest zwykła funkcja w JavaScript'cie i jeśli coś chcemy z

5:47niej zwrócić, to możemy to oczywiście zadeklarować. Natomiast, jeśli chcemy z nich zwrócić

5:51absolutnie nic, to najlepiej właśnie, aby był to null. Będziemy mieć tu

5:55sporo porównywania do activeOption, więc już teraz zdestrukturyzujemy go sobie w

5:59tym miejscu. Teraz podmienimy

6:09każde this.state.activeOption, na po prostu, activeOption. Nasz

6:16modal działa. Nic się nie zepsuło. Okej, możemy działać dalej. Renderowanie

6:23warunkowe mamy już ogarnięte. Teraz będziemy zmieniać label do naszego name. Jeśli activeOption

6:28jest równe Twitter'owi

6:32i wtedy

6:37niech to się nazywa Twitter Name. Jeśli

6:43natomiast to nie będzie Twitter, to niech to będzie zwykłe Title. Mamy

6:49Twitter Name, a jak zmienimy, to mamy Title - świetnie. I

6:54jeszcze ostatnia rzecz, zresztą bardzo podobna do tej. Możemy

6:58to skopiować tutaj,

7:04tylko podmienimy na Twitter link. A jeśli to nie będzie

7:08Twitter, to niech to będzie link. Tutaj

7:15dodatkowo musimy jeszcze zrobić renderowanie warunkowe, bo tak jak

7:19mówiłem w notatkach, nie będzie linków activeOption. Zróbmy,

7:31że jeśli to nie będzie notatka, to

7:37wtedy ma się pojawić, a jeśli to będzie notatka, to ma zwrócić null'a. Chwila

7:45prawdy, super,

7:51nasz model działa jak należy. Nasz form elegancko

7:55zmienia wszystkie opcje tak, jak chcieliśmy. Kawał

8:00dobrej roboty za nami. Stworzyliśmy dość zaawansowany model, z fajnym

8:04dynamicznym formularzem. Stworzyliśmy routing, który działa bez

8:09zarzutu w naszej aplikacji, więc teraz czas, żeby przejść

8:13do następnego działu tego kursu, gdzie opowiem Context API. Do

8:18zobaczenia!