1 00:00:02,340 --> 00:00:06,210 Było dużo gadania, wiele rzeczy zostało zrobionych, teraz nadszedł 2 00:00:06,210 --> 00:00:10,680 czas, aby ten przycisk zadziałał i pozwól nam dodać cel tutaj, 3 00:00:10,680 --> 00:00:11,780 w 4 00:00:11,850 --> 00:00:17,040 tym celu, i musimy dowiedzieć się, co użytkownik wszedł, a potem oczywiście słuchaj 5 00:00:17,040 --> 00:00:23,850 stuknięcia przycisku, a następnie dodaj wprowadzony cel do szeregu celów, którymi musimy gdzieś zarządzać, które możemy następnie 6 00:00:23,850 --> 00:00:26,850 wyprowadzić tam w tym dolnym widoku, właśnie 7 00:00:26,850 --> 00:00:29,630 to musimy zrobić. Teraz na tym 8 00:00:29,670 --> 00:00:35,600 kursie będę używać funkcjonalnych komponentów tylko z funkcją zaczepów React, która jest stosunkowo nowa, więc 9 00:00:35,640 --> 00:00:41,550 jeśli jeszcze nie znasz zaczepów React, zdecydowanie najpierw się o nich dowiedz, na przykład w 10 00:00:41,550 --> 00:00:42,120 moim 11 00:00:42,120 --> 00:00:47,250 React Complete Guide, dokładnie opisuję ale dołączone, znajdziesz także inne zasoby, które 12 00:00:47,250 --> 00:00:54,000 pomogą Ci zacząć od haków React, ponieważ będziemy potrzebować haków React, na przykład aby uzyskać wkład użytkownika. 13 00:00:54,000 --> 00:01:00,280 Użyliśmy haka useState do tego, co importujemy z React, nie z React Native, ale 14 00:01:00,300 --> 00:01:02,070 z React, jest 15 00:01:02,220 --> 00:01:10,620 to podstawowa funkcja React, a następnie tutaj, w tym komponencie funkcjonalnym, w tym komponencie aplikacji, możemy uzyskać wpisany 16 00:01:10,620 --> 00:01:19,110 cel, a także ustawić zestaw wprowadzono funkcję celu, aby zaktualizować stan za pomocą useState i domyślnie mamy stan 17 00:01:19,110 --> 00:01:24,840 początkowy, który jest pustym ciągiem, ponieważ użytkownik nie wprowadził niczego na początku. 18 00:01:24,870 --> 00:01:27,330 Teraz możemy powiązać to z 19 00:01:27,330 --> 00:01:33,870 wprowadzaniem tekstu, co oznacza, że gdy użytkownik wpisze znak, chcemy zaktualizować nasz stan i zapisać wprowadzony 20 00:01:33,870 --> 00:01:39,240 tekst w stanie tutaj, do którego możemy uzyskać dostęp poprzez wprowadzony cel, a 21 00:01:39,240 --> 00:01:46,680 my przejdziemy wprowadzony cel z powrotem do wprowadzania tekstu. To jest dwukierunkowe wiązanie, jest to tak zwany kontrolowany komponent, który znasz 22 00:01:46,680 --> 00:01:50,380 również z React dla sieci z normalnymi elementami wejściowymi HTML. 23 00:01:50,430 --> 00:01:57,340 Więc tutaj możemy posłuchać onChangeText, rekwizytu zapewnianego przez wprowadzanie tekstu, który przyjmuje funkcję, która będzie 24 00:01:57,430 --> 00:01:59,930 wykonywana przy każdym naciśnięciu klawisza. 25 00:01:59,970 --> 00:02:04,660 Teraz moglibyśmy udostępnić tutaj funkcję wbudowaną, ale możemy również skonfigurować osobną funkcję, aby 26 00:02:04,660 --> 00:02:09,850 mieć nieco czystszy kod, a ty możesz mieć funkcję w funkcji i musimy ją 27 00:02:09,850 --> 00:02:17,770 tutaj mieć, abyśmy mogli użyć naszego stanu lub ustaw tutaj wprowadzoną funkcję celu, po prostu dodając tutaj nową funkcję, moduł obsługi 28 00:02:18,990 --> 00:02:26,400 celu może być nazwą, ale nazwa należy do Ciebie. W tej funkcji automatycznie otrzymamy wprowadzony tekst, 29 00:02:26,580 --> 00:02:34,170 który zostanie przekazany przez React lub React Native tutaj, a następnie możemy wywołać ustawiony wprowadzony cel i 30 00:02:34,200 --> 00:02:40,770 przekazać wprowadzony tekst jako wartość, ponieważ wprowadzony tekst będzie już string, ponieważ łączymy moduł wprowadzania 31 00:02:41,100 --> 00:02:48,630 danych celu z onChangeText, po prostu wskazując go tutaj. To ważne, nie dodawaj nawiasów na dole, ponieważ spowodowałoby 32 00:02:48,900 --> 00:02:54,300 to wykonanie tej funkcji, gdy ten kod zostanie przeanalizowany, więc gdy interfejs użytkownika 33 00:02:54,330 --> 00:02:59,880 jest renderowany po raz pierwszy. Nie chcesz tego jednak wykonywać od 34 00:02:59,880 --> 00:03:05,940 razu, chcesz go wykonywać przy każdym naciśnięciu klawisza, dlatego po prostu bierzesz nazwę funkcji, przekazujesz 35 00:03:05,940 --> 00:03:12,210 tę nazwę funkcji do onChangeText i to skutecznie mówi React Native, hej, to jest funkcję, którą 36 00:03:12,210 --> 00:03:19,260 powinienem wykonać przy każdym naciśnięciu klawisza, więc nie dodawaj tutaj nawiasów, aby działało to przy każdym naciśnięciu klawisza. 37 00:03:20,010 --> 00:03:25,170 Teraz zamiast tej składni funkcji, możesz przy okazji użyć innej składni, której będę używać 38 00:03:25,170 --> 00:03:31,080 podczas całego kursu, w której tworzysz stałą o tej nazwie tutaj, a następnie wartość tej 39 00:03:31,080 --> 00:03:38,190 stałej po znaku równości jest po prostu funkcja przy użyciu tej składni funkcji strzałki, więc tutaj jest twoja 40 00:03:38,180 --> 00:03:44,490 lista argumentów i to jest treść funkcji. To jest normalna składnia Javascript, jest obsługiwana przez 41 00:03:44,490 --> 00:03:49,470 kod JavaScript React Native jest w stanie działać, a zatem jest to składnia, której użyję, 42 00:03:49,470 --> 00:03:56,820 podłączasz ją do onChangeText dokładnie w taki sam sposób jak poprzednio. Ok, więc teraz mamy tę funkcję podłączoną, aktualizujemy nasz 43 00:03:57,090 --> 00:04:01,050 stan za pomocą tego, co użytkownik wprowadził przy każdym naciśnięciu klawisza, 44 00:04:01,050 --> 00:04:07,800 teraz musimy również przekazać ten tekst z powrotem do wprowadzania tekstu, aby był tam wyświetlany poprawnie, po prostu wiążąc 45 00:04:07,800 --> 00:04:14,190 właściwość value z wpisany cel, więc do naszego stanu, który będzie się zmieniał z każdym naciśnięciem klawisza. 46 00:04:14,870 --> 00:04:20,400 Dzięki temu uzyskujemy dostęp do danych wejściowych użytkownika, ponieważ teraz będą 47 00:04:20,400 --> 00:04:27,010 one zawsze przechowywane w wpisanym celu. Teraz, gdy użytkownik naciśnie przycisk, chcemy użyć wprowadzonego celu, 48 00:04:27,040 --> 00:04:33,730 więc w tym celu dodam tutaj inną funkcję, dodaj moduł obsługi celu i to jest tylko konwencja nazewnictwa, której 49 00:04:33,940 --> 00:04:39,310 używam dla tych funkcji tutaj, możesz nazwać je niezależnie od chcesz, bez względu na to, 50 00:04:39,310 --> 00:04:45,820 do czego jesteś przyzwyczajony z aplikacji React, w końcu nazwa funkcji powinna po prostu opisać, co się wydarzy, i 51 00:04:45,820 --> 00:04:52,920 że tutaj obsłuży naciśnięcie tego przycisku, który ostatecznie doda cel. Tutaj funkcja nie przyjmuje żadnych argumentów, ale w treści funkcji chcę 52 00:04:52,920 --> 00:04:58,150 dodać mój wpisany cel do listy celów i nie mamy jeszcze żadnej listy, więc na razie 53 00:04:58,230 --> 00:05:04,830 to, co tutaj robię, to dziennik konsoli, który jest obsługiwany w React Natywny, wprowadzony cel, abyśmy przynajmniej widzieli, że został on 54 00:05:04,830 --> 00:05:10,710 poprawnie zapisany i że ta funkcja jest wykonana. Aby to wykonać, musimy jednak 55 00:05:10,710 --> 00:05:16,680 podłączyć go do przycisku, tam możemy dodać prop onPress i wskazać na funkcję 56 00:05:16,680 --> 00:05:24,160 dodawania celu, ponownie bez nawiasów, aby nie wykonało się to natychmiast, ale tylko w przypadku naciśnięcia. 57 00:05:24,540 --> 00:05:33,720 A teraz zapiszmy to wszystko i wróćmy i może wejdźmy, nauczmy się React Native, a dobrą rzeczą jest to, że możesz tutaj użyć swojej 58 00:05:33,720 --> 00:05:41,560 prawdziwej klawiatury i nacisnąć add i powinieneś zobaczyć tutaj w swoim terminalu ten dziennik, zobaczysz to również tak przy okazji, w 59 00:05:41,560 --> 00:05:48,130 narzędziach do tworzenia expo tutaj, w zakładce przeglądarki. Tam, jeśli klikniesz jedno z podłączonych urządzeń, 60 00:05:48,150 --> 00:05:52,670 to, w którym po prostu klikniesz przycisk w moim przypadku, 61 00:05:52,670 --> 00:05:57,730 urządzenie z Androidem, a tam u dołu zobaczysz również Learn React Native. 62 00:05:57,730 --> 00:06:05,350 I oczywiście działa to również na iOS, dowiedz się wszystkiego o React Native, jeśli wprowadzimy to tutaj i klikniemy dodaj, wtedy 63 00:06:05,350 --> 00:06:12,840 również zobaczymy, że jesteśmy tutaj zalogowani, a także zobaczymy to w narzędziach do tworzenia expo, jeśli klikniemy iPhone na na 64 00:06:12,840 --> 00:06:16,810 samym dole widzimy ten dziennik. Okej, więc otrzymujemy 65 00:06:16,910 --> 00:06:21,530 dane od użytkowników, przechowujemy je, logujemy się do konsoli, oczywiście 66 00:06:21,530 --> 00:06:27,530 nie chcemy logować się do konsoli, chcemy wyprowadzić je poniżej naszego wpisu tutaj, 67 00:06:27,530 --> 00:06:35,000 chcemy lista naszych celów poniżej tego obszaru wprowadzania. Dlatego potrzebujemy tutaj drugiego widoku, który powinien wypisać naszą listę przedmiotów. 68 00:06:35,030 --> 00:06:40,250 Tak więc między tagami otwierającym i zamykającym chcę wypisać wszystkie 69 00:06:40,280 --> 00:06:45,740 dodane elementy, wszystkie dodane cele. W tym celu musimy przede wszystkim zarządzać 70 00:06:46,400 --> 00:06:51,780 naszymi celami i możemy ustawić inny stan dla tego, który początkowo jest pustą tablicą, stąd przekazuję 71 00:06:51,860 --> 00:06:58,010 pustą tablicę jako wartość do użycia Stan i tam mamy nasze cele kursu i ustalone cele kursu funkcjonować. 72 00:06:58,010 --> 00:07:03,070 Teraz te nazwy są zawsze od Ciebie, ale powinny opisywać, co jest w twoim stanie i jak 73 00:07:03,070 --> 00:07:04,230 możesz je zaktualizować. 74 00:07:04,240 --> 00:07:10,330 Więc teraz tutaj, kiedy dodajemy cel, chcę zaktualizować moje cele kursu, aby dodać nowy 75 00:07:10,330 --> 00:07:20,840 cel. W tym celu mogę nazwać wyznaczone cele kursu i teraz ustawić cele kursu na nową tablicę, w której biorę swoje stare cele kursu i 76 00:07:20,840 --> 00:07:21,740 dodaję nowy. 77 00:07:21,740 --> 00:07:25,100 Teraz jest to składnia, której możesz nie znać, to 78 00:07:25,100 --> 00:07:30,470 tak zwany operator rozprzestrzeniania, jest to funkcja JavaScript, która przyjmuje istniejącą tablicę, a cele kursu 79 00:07:30,470 --> 00:07:38,030 to tablica, to nasza migawka obecnego stanu przed aktualizacją i wyciąga z niej wszystkie elementy tablica, a następnie dodaje je tutaj 80 00:07:38,030 --> 00:07:43,280 do nowej tablicy, dlatego mam otaczające nawiasy kwadratowe, bez tych otaczających nawiasów kwadratowych to 81 00:07:43,280 --> 00:07:43,840 nie 82 00:07:43,850 --> 00:07:49,310 działałoby, ale teraz tworzymy nową tablicę i dodajemy wszystkie elementy starej tablicy i teraz możemy 83 00:07:49,310 --> 00:07:51,100 dodaj także nowy element. 84 00:07:51,110 --> 00:07:53,370 Więc tutaj dodaję przecinek, aby 85 00:07:53,390 --> 00:08:00,310 dodać dodatkowy element po wszystkich elementach, które tu wyciągam, a element, który tu dodam, jest oczywiście moim celem. 86 00:08:00,320 --> 00:08:04,680 Tak więc teraz aktualizujemy naszą listę celów o starą listę 87 00:08:04,730 --> 00:08:10,250 celów, początkowo pustą listę, ale potem ta liczba będzie rosła z czasem, ponieważ 88 00:08:10,250 --> 00:08:17,380 następnie dodamy nowy cel po naciśnięciu tego przycisku. Teraz drobna uwaga, podczas pracy z ustalonymi celami 89 00:08:17,380 --> 00:08:21,410 kursu, cele kursu są naszym poprzednim stanem i sposób, 90 00:08:21,460 --> 00:08:28,210 w jaki React aktualizuje stan, powinien zawsze być twoją najnowszą migawką stanu, ale nie jest w 91 00:08:28,360 --> 00:08:32,750 100% gwarantowany, aby mieć tę 100% gwarancję , kiedy aktualizujesz swój 92 00:08:32,920 --> 00:08:39,250 stan w oparciu o stary stan, możesz użyć formy funkcji tej funkcji zestawu, w której 93 00:08:39,250 --> 00:08:39,950 nie 94 00:08:40,060 --> 00:08:46,870 przekazujesz tutaj wartości nowego stanu, ale zamiast tego przekazujesz ją w funkcji, zwykle w funkcji anonimowej, w 95 00:08:46,990 --> 00:08:53,850 której pobierz swój aktualny stan lub aktualne cele, więc twoja migawka bieżącego stanu, a następnie zwróć zaktualizowaną 96 00:08:53,860 --> 00:09:01,240 wartość, więc tutaj zwracam moją zaktualizowaną tablicę z tą składniową funkcją strzałki, gdzie jeśli masz tylko jedno wyrażenie, 97 00:09:01,240 --> 00:09:06,640 możesz pominąć nawiasy klamrowe i instrukcja return i po prostu wprowadź wartość, którą 98 00:09:06,640 --> 00:09:08,650 chcesz zwrócić, a ona zostanie 99 00:09:08,680 --> 00:09:13,310 zwrócona, i to wszystko jest normalne JavaScript, nic React Native Native. 100 00:09:13,450 --> 00:09:21,070 Więc tutaj biorę moje obecne cele, a następnie dodaję wpisany cel. Ta składnia jest nieco lepsza, druga też 101 00:09:21,070 --> 00:09:26,170 by działała, ale gwarantuje to, że zawsze będzie działać, 102 00:09:26,200 --> 00:09:33,520 ponieważ React Native będzie tutaj zawsze oferował gwarancję, najnowszą migawkę stanu, zanim zastosuje tutaj 103 00:09:33,550 --> 00:09:35,050 zmianę stanu. 104 00:09:35,260 --> 00:09:42,410 Teraz to miłe, będziemy mieć listę, szereg celów zarządzanych tutaj. Jak możemy teraz to generować?