1 00:00:02,330 --> 00:00:09,590 Tak więc przycisk dodawania w tym miejscu wywołuje AddGoal, co zasadniczo przekazuje cel do aplikacji. js, czego dokładnie potrzebujemy, ale musimy 2 00:00:09,590 --> 00:00:10,860 również 3 00:00:11,030 --> 00:00:16,660 upewnić się, że kiedy dodamy nowy cel, modal zostanie zamknięty. 4 00:00:16,700 --> 00:00:22,790 Pamiętaj, że ostatecznie kontrolujemy widoczność modalną z poziomu aplikacji. plik js, ponieważ tam mamy stan 5 00:00:22,790 --> 00:00:29,690 isAddMode, który zmieniamy po kliknięciu tego przycisku, na przykład przycisk dodawania nowego celu 6 00:00:29,690 --> 00:00:31,050 i 7 00:00:31,220 --> 00:00:38,900 ta wartość stanu, isAddMode, jest przekazywany do danych wejściowych celu, gdzie następnie używamy go do 8 00:00:38,900 --> 00:00:40,310 kontrolowania widoczności modalny. 9 00:00:40,340 --> 00:00:46,580 Aby więc upewnić się, że modal zniknie, musimy po prostu zmienić 10 00:00:46,580 --> 00:00:52,270 isAddMode ponownie w aplikacji. plik js, ponieważ nowa wartość zostanie następnie automatycznie przekazana do danych wejściowych celu. 11 00:00:52,310 --> 00:00:56,990 Więc wszystko, co musimy zrobić, to dodać moduł obsługi celu, w którym ustalamy cele 12 00:00:56,990 --> 00:01:03,920 kursu, musimy również ustawić isAddMode na false, ponieważ skończyliśmy dodawanie. Teraz mała uwaga, sposób, w jaki React działa, jeśli ustawiasz 13 00:01:03,920 --> 00:01:06,500 dwa stany po sobie, grupuje je razem, 14 00:01:06,590 --> 00:01:08,230 nie będzie ponownie renderować 15 00:01:08,270 --> 00:01:14,060 komponentu dwa razy po pierwszej zmianie i po drugiej zmianie, zamiast tego będzie zasadniczo stosować wszystkie 16 00:01:14,060 --> 00:01:19,460 zmiany stanu na raz i tylko renderowanie komponentu raz, co oczywiście jest dobre, w przeciwnym 17 00:01:19,460 --> 00:01:20,110 razie 18 00:01:20,120 --> 00:01:23,240 mielibyśmy tam niepotrzebny cykl ponownego renderowania i jest to 19 00:01:23,240 --> 00:01:29,960 po prostu dobra optymalizacja, którą robi dla nas React. Możemy więc absolutnie zmienić dwa różne stany po sobie w 20 00:01:29,990 --> 00:01:31,760 ten sposób, a dzięki temu 21 00:01:31,760 --> 00:01:38,740 modal powinien wiedzieć, że faktycznie zniknie, jeśli ustawimy to na false. Przetestujmy to tutaj na 22 00:01:38,740 --> 00:01:40,430 iOS. 23 00:01:40,480 --> 00:01:46,320 Jeśli dodam tutaj naucz się React Native, kliknij dodaj, to 24 00:01:46,420 --> 00:01:52,530 zniknie, a teraz dowiedz się więcej, to również działa i nadal 25 00:01:52,530 --> 00:01:54,510 mogę usuwać elementy. 26 00:01:54,740 --> 00:01:58,910 Teraz, aby przetestować to na Androidzie, tak samo jak poprzednio, 27 00:01:59,060 --> 00:02:01,310 uruchommy to ponownie na 28 00:02:05,490 --> 00:02:11,840 Androidzie, kliknij dodaj nowy cel i dowiedz się React Native tutaj, kliknij dodaj i 29 00:02:11,850 --> 00:02:23,740 to zamyka, teraz nauczmy się tutaj więcej, podobnie jak to i działa poprawnie. Teraz dwie małe poprawki, które wciąż chcę zastosować, na przykład chcę wyczyścić 30 00:02:23,740 --> 00:02:29,800 dane wejściowe, gdy skończymy, a ponadto chcę udostępnić przycisk anulowania, aby zamiast 31 00:02:29,800 --> 00:02:36,550 dodawać to, możemy również anulować tutaj, aby zamknąć modal bez dodawania przedmiotu, ponieważ w 32 00:02:36,610 --> 00:02:40,290 tej chwili nie możemy tego zrobić. 33 00:02:40,300 --> 00:02:43,300 Zacznijmy od wyczyszczenia naszego wkładu tutaj 34 00:02:43,300 --> 00:02:48,480 po tym, jak coś wprowadziliśmy. W tym celu przy wprowadzaniu celu 35 00:02:48,480 --> 00:02:49,530 ostatecznie wprowadziliśmy 36 00:02:49,560 --> 00:02:56,370 cel i musimy go zresetować po dodaniu nowego celu. Teraz oczywiście dodajemy nowy cel, kiedy wciskamy ten 37 00:02:56,370 --> 00:03:01,690 przycisk dodawania, a na końcu uruchamiamy funkcję, którą otrzymujemy za pomocą prop onAddGoal. 38 00:03:01,700 --> 00:03:07,110 Teraz, aby wyczyścić nasze dane wejściowe, możemy tutaj dodać funkcję wewnątrz elementu wejściowego 39 00:03:07,290 --> 00:03:12,440 celu, dodać moduł obsługi celu lub jakkolwiek chcesz go nazwać, jest 40 00:03:12,560 --> 00:03:19,310 to funkcja, która nie musi brać żadnych argumentów i w końcu teraz jest to funkcja, którą 41 00:03:19,310 --> 00:03:20,270 chcę uruchomić. 42 00:03:20,300 --> 00:03:23,330 Chcę więc uruchomić dodawanie modułów obsługi 43 00:03:23,360 --> 00:03:29,660 celu, więc moja własna funkcja w tym komponencie. Teraz tutaj chcę wywołać rekwizyty na AddGoal bez 44 00:03:29,660 --> 00:03:35,630 wiązania tutaj, możemy po prostu wywołać to w ten sposób, ponieważ kiedy ta funkcja działa, chcę 45 00:03:35,630 --> 00:03:39,340 ją wykonać, tutaj po prostu przekazujemy wskaźnik tej funkcji bez 46 00:03:39,340 --> 00:03:44,270 nawiasów, więc tutaj nie mogą mieć nawiasów, aby nie wykonać tego zbyt wcześnie, 47 00:03:44,270 --> 00:03:49,460 tutaj absolutnie potrzebujemy nawiasów, ponieważ działa to tylko wtedy, gdy ta funkcja jest wykonywana 48 00:03:49,460 --> 00:03:52,340 i wtedy chcę uruchomić funkcję w 49 00:03:52,340 --> 00:03:59,000 moim komponencie nadrzędnym, więc tutaj w komponencie aplikacji. I tutaj na onAddGoal, oczywiście nadal chcę przekazać mój wpisany 50 00:03:59,000 --> 00:03:59,390 cel 51 00:03:59,390 --> 00:04:03,770 tutaj, więc ten stan, chcę to przekazać dalej, ale później też chcę go wyczyścić. 52 00:04:04,010 --> 00:04:06,140 Następnie ustawię ponownie wprowadzony 53 00:04:06,140 --> 00:04:10,930 cel na pusty ciąg znaków, co spowoduje zresetowanie wprowadzonego tutaj tekstu. 54 00:04:10,970 --> 00:04:12,120 Więc to jedna 55 00:04:12,140 --> 00:04:18,770 rzecz, drugą rzeczą jest przycisk, który pozwala nam to zamknąć. W tym celu możemy dodać tutaj przycisk, który 56 00:04:18,950 --> 00:04:22,100 może mieć tytuł anulowania, ponieważ w końcu to 57 00:04:22,100 --> 00:04:23,990 powinien zrobić ten przycisk i 58 00:04:23,990 --> 00:04:24,880 anulować 59 00:04:24,890 --> 00:04:29,410 przycisk, fajnie byłoby nie mieć domyślnego niebieskiego koloru, ale zmienić ten kolor, 60 00:04:29,420 --> 00:04:33,410 a można to zrobić, dodając tutaj prop kolor, na przykład 61 00:04:33,410 --> 00:04:39,250 możemy ustawić tutaj kolor czerwony, ponieważ moim zdaniem czerwony jest dobrym kolorem do anulowania przycisk. 62 00:04:40,850 --> 00:04:44,960 Jeśli zapiszemy to i przetestujemy to tutaj na iOS, zobaczymy 63 00:04:44,960 --> 00:04:47,540 przycisk anulowania i przycisk dodawania, 64 00:04:47,690 --> 00:04:55,300 a teraz, jeśli nauczę się React Native tutaj i dodam to, to zostanie dodane, a jeśli ponownie je 65 00:04:55,300 --> 00:05:02,830 otworzę, zobaczysz, że zostało wyczyszczone i anulowanie oczywiście nic nie robi, ponieważ musimy połączyć anulować z komponentem aplikacji, 66 00:05:02,950 --> 00:05:06,280 w którym kontrolujemy widoczność poprzez kontrolowanie isAddMode. 67 00:05:07,330 --> 00:05:16,090 Więc tutaj możemy teraz dodać kolejny moduł obsługi funkcji w składniku aplikacji, anulować moduł obsługi celu lub coś takiego, to bardzo długa 68 00:05:16,120 --> 00:05:16,870 nazwa, 69 00:05:16,870 --> 00:05:21,040 chcę tylko jasno powiedzieć, co to robi i kiedy jest wywoływane. 70 00:05:21,040 --> 00:05:26,800 Więc tutaj mamy dodatkowy moduł obsługi celu anulowania, a na koniec tutaj możemy po prostu 71 00:05:26,800 --> 00:05:28,540 ustawić isAddMode na false, 72 00:05:29,050 --> 00:05:31,020 co zamknie modal i oczywiście 73 00:05:31,030 --> 00:05:36,550 nie robimy nic innego, nie zmieniamy naszych celów kursu, ponieważ anulowaliśmy dodanie i teraz możemy 74 00:05:36,550 --> 00:05:38,590 przekazać to do elementu celu, 75 00:05:38,650 --> 00:05:45,580 do danych wejściowych celu, więc do naszego komponentu tutaj. Tam możemy dodać rekwizyt onCancel, nazwa tego rekwizytu oczywiście 76 00:05:45,580 --> 00:05:48,330 zależy od ciebie, ponieważ jest to twoja 77 00:05:48,580 --> 00:05:53,710 rekwizyt na twoim własnym komponencie, a ja przesłałem wskaźnik w funkcji anulowania dodawania celu 78 00:05:54,000 --> 00:05:59,480 do onCancel i teraz wewnątrz wprowadzania celu, możemy uruchom on Anuluj po naciśnięciu tego przycisku. 79 00:05:59,500 --> 00:06:04,990 Więc tutaj dodajemy onPress i chcemy uruchamiać rekwizyty. onCancel tutaj, więc funkcja, 80 00:06:04,990 --> 00:06:12,690 którą otrzymujemy na naszej propozycji onCancel. Dzięki temu przycisk anulowania powinien działać, tak 81 00:06:12,770 --> 00:06:14,260 działa dobrze. 82 00:06:14,510 --> 00:06:17,830 Teraz powinien również oczywiście działać na Androidzie, 83 00:06:17,900 --> 00:06:19,310 ale aby 84 00:06:19,310 --> 00:06:22,930 go przetestować, tak samo jak zawsze, zamknijmy go 85 00:06:22,940 --> 00:06:31,340 i uruchommy ponownie, a następnie zobaczmy, czy wyczyszczenie wejścia działa. Jeśli wejdę lub nauczę się React Native tutaj, kliknij dodaj, tak, to jest 86 00:06:31,340 --> 00:06:33,330 puste i anuluj działa również. 87 00:06:33,350 --> 00:06:38,300 Jeśli chodzi o stylizację tutaj na Androidzie, byłoby miło mieć trochę odstępów między 88 00:06:38,390 --> 00:06:43,150 przyciskami lub faktycznie na obu platformach, może te przyciski będą obok siebie.