React: Otwieranie i zamykanie modala

0:00Cześć! Skoro nasz modal już jest gotowy do dalszej pracy, to teraz zajmiemy

0:04się jego otwieraniem i zamykaniem. Żeby to zrobić, stworzymy sobie w naszym

0:08głównym komponencie, w naszym root'owym widoku, nową wartość w state'cie. Będzie

0:13się nazywać isModalOpen. Domyślnie

0:17ustawimy ją na false. A w

0:22tym miejscu, stworzymy znane ci już, renderowanie warunkowe. Zapytamy,

0:27czy isModalOpen i jeśli

0:33tak, to nasz modal się pojawi. Tutaj tylko jedna rzecz, żeby

0:37nie pisać tego długiego this.state.isModalOpen, to

0:41możemy sobie to zdestrukturyzować w naszej funkcji render. W taki sposób. Jest to

0:50powszechna praktyka, która pozwala nam na to, żeby nasz kod był trochę bardziej czytelny. Tutaj,

0:55jeśli mielibyśmy kilka wartości odwołujących do stanu, no

0:59to wtedy mielibyśmy problem. No, każda linijka byłaby tak naprawdę, bardzo, bardzo

1:03długa, więc w ten sposób możemy sobie zaoszczędzić trochę czasu i miejsca w

1:07kodzie. No, dobrze, ale skoro już mamy isModalOpen, teraz musimy to

1:11zmieniać. Czymś to musimy otwierać i tak jak już mówiłem, tym będzie zajmować

1:16się button new item, ale żeby on mógł nam to robić, to musimy

1:20stworzyć też funkcję, która będzie wywoływać nasz modal, więc

1:24to co chcemy zrobić, to stworzyć funkcje openModal. To

1:31oczywiście będzie funkcja strzałkowa i wewnątrz niej stworzymy

1:35this. setState, isModalOpen i chcemy,

1:41żeby ta funkcja zawsze otwierała nam modal. Niekoniecznie go

1:45zamykała, bo jeśli chcielibyśmy, żeby zamykała, to musielibyśmy tutaj dodać jeszcze

1:49prevState, odwołując się do poprzedniego stanu, który

1:53istniał, ponieważ jak już wiesz, setState jest asynchroniczne, więc jeśli

1:57zmieniamy coś w zależności od poprzedniego stanu, to zawsze odwołujemy się do prevState,

2:01tak jak w tym miejscu. A my chcemy, żeby zawsze było true, po

2:06kliknięciu tego guzika, więc to będzie taka bardzo prosta funkcja i teraz,

2:10skoro już mamy tę funkcję gotową, to teraz musimy ją przekazać do naszego header'a, bo

2:15w nim znajduje się button. Nazwiemy ją openModalFn, this.o

2:23penModal. W ten sposób, funkcja

2:28została przekazana do naszego header'a. Jak sobie tutaj wejdziemy, to

2:33możemy ją w props'ach zdestrukturyzować, a następnie na

2:37naszym button'ie, jeśli wykonamy onClick, to

2:41chcemy, żeby to się wykonało i teraz, z

2:46tym button'em, już teraz cię uprzedzę, będzie bardzo ciekawa sytuacja. Jeszcze o

2:51tym nie odpowiadałem, ale to się zdarza bardzo często i co więcej, w React'cie

2:55bardzo łatwo o tym zapomnieć. Popatrz, dodaliśmy props'a onClick,

2:59z gotową funkcją, która ma się wykonać po kliknięciu w nasz

3:03button. Mimo to, nic się dzieje. Wynika

3:09to tego, że nasz button, sam w sobie, jest już komponentem, nie

3:13jest generycznym elementem HTML'a. Nie jest zwykłym button'em, tylko jest komponentem button'em

3:17i podaliśmy mu tak naprawdę, nowego props'a. A jeśli

3:21wejdziemy sobie tutaj i spojrzymy na props'y w naszym button'ie, które wyciągamy,

3:25to mamy tylko children, href i secondary. Nie

3:29mamy tutaj onClick, więc nawet, jeśli wykonamy jakąś

3:34funkcję na naszym onClick'u, to ten button tutaj, o

3:38tym się dowie, ponieważ ten props onClick nie został przekazany

3:42niżej. On w ogóle nie został przekazany do tego komponentu. Dlatego,

3:47bardzo często robi się jeszcze coś takiego. W ten sposób destruktyzujemy

3:51pozostałe props'y, które podajemy do naszego button'a. To może być onClick. To

3:56może być jeszcze coś innego. Wszystko, co nie zostało uwzględnione tutaj,

4:00po imieniu, zostanie zamknięte właśnie w tym props'ie. I teraz,

4:05żeby przekazać te wszystkie props'y, pozostałe, do

4:10naszego button'a, to musimy, po prostu, użyć znanego Ci już

4:14spread operator'a i przekazać właśnie te propsy. I w tym

4:18momencie, kiedy kliknę new item, to powinienem  nam się pojawić modal. Zobaczymy, czy miałem

4:22rację. Super, więc skoro otwieranie już

4:26mamy ogarnięte, to teraz wracamy do naszego Route State i sprawdzamy, co możemy

4:30zrobić, żeby zamknąć ten modal. To

4:33również będzie bardzo proste, musimy stworzyć funkcję odwrotną do openModal. Nazwiemy ją

4:40oczywiście closeModal. Ona zawsze będzie ustawiać nasz state na false,

4:45ale tym razem przekażemy ją do

4:51naszego modal'a, closeModalFn, this.closeModal. Przechodzimy

4:57do naszego modala. Zdestruktuzyjemy

5:04sobie naszą funkcję i na

5:08razie stworzymy bardzo prosty button, który po prostu wykona tę funkcję. Sprawdzimy czy

5:25to działa. Super. Zauważ,

5:29że to już jest taki bardzo prosty, generyczny właśnie element button. On

5:34może dostać zwykłego Anglika i wszystko działa, jak należy. I żeby

5:38zaoszczędzić troszeczkę czasu, to ten button, tak jak mamy

5:42w design'ach, zrobię poza tą lekcję. I możemy się też tak umówić,

5:46że w ramach ćwiczenia, zrobisz to samodzielnie, ale oczywiście jeśli

5:50nie chcesz tego robić, to w branch'u, połączonym z następną lekcją, znajdziesz gotowy

5:55kod, który możesz wkleić do swojego projektu.