1 00:00:02,600 --> 00:00:08,300 Teraz, aby usunąć naciśnięty element, dodam nową funkcję tutaj w moim komponencie aplikacji, więc nowa funkcja, 2 00:00:08,480 --> 00:00:10,790 którą przechowuję w tej stałej i 3 00:00:11,150 --> 00:00:13,750 nadam jej nazwę, usuń moduł obsługi celu 4 00:00:13,970 --> 00:00:20,180 i tutaj spodziewam się uzyskać identyfikator celu jako dane wejściowe, ponieważ ten identyfikator pozwala nam zidentyfikować element, 5 00:00:20,180 --> 00:00:22,280 który chcemy usunąć, alternatywnie możemy 6 00:00:22,280 --> 00:00:26,620 również pobrać indeks do tablicy, a następnie usunąć element według indeksu, ale 7 00:00:26,630 --> 00:00:32,450 myślę, że identyfikator jest jeszcze lepszy, ponieważ mamy Identyfikator wyraźnie dopasowany do każdego elementu, dlaczego nie 8 00:00:32,450 --> 00:00:34,480 użyjemy tego do usunięcia 9 00:00:34,750 --> 00:00:40,220 go, a teraz tutaj możemy ustawić nasze cele kursu, ponieważ oczywiście chcę zaktualizować moje cele 10 00:00:40,220 --> 00:00:45,070 kursu i ponownie, dokonujemy aktualizacji, która jest oparta na naszych aktualne cele kursu, 11 00:00:45,080 --> 00:00:47,190 więc skorzystam z tej funkcji tutaj, 12 00:00:47,240 --> 00:00:50,400 przekazuję funkcję, funkcję anonimową do ustalania celów kursu. 13 00:00:50,510 --> 00:00:52,610 Tam otrzymuję migawkę mojego aktualnego 14 00:00:52,610 --> 00:00:57,890 stanu, aktualne cele kursu, a w ciele funkcji muszę zwrócić zaktualizowane cele kursu. 15 00:00:57,890 --> 00:01:04,490 Teraz, jeśli zastanawiasz się, dlaczego nie mam tutaj nawiasów klamrowych, tutaj używam krótszej składni, w której mam tylko jedno 16 00:01:04,490 --> 00:01:06,860 wyrażenie, które chcę zwrócić, więc pomijam treść 17 00:01:06,860 --> 00:01:10,500 funkcji i instrukcję return. Tutaj będę miał 18 00:01:10,730 --> 00:01:15,380 trochę dłuższej instrukcji, dlatego chcę mieć tu funkcję dla czytelności, ponieważ 19 00:01:15,860 --> 00:01:22,430 tutaj zwrócę filtr celów bieżących, ponieważ filtr jest wbudowaną metodą wbudowaną w JavaScript, która pozwala nam 20 00:01:22,730 --> 00:01:28,940 aby zwrócić nową tablicę, filtr zawsze zwraca nową tablicę, która jest oparta na starej 21 00:01:28,940 --> 00:01:32,800 tablicy, na której ją nazywamy, filtrowaną według określonych kryteriów. 22 00:01:32,840 --> 00:01:39,260 Teraz kryteria są ostatecznie przekazywane za pomocą funkcji, którą przekazujesz do filtrowania. Ta funkcja, którą przekazujesz do filtrowania, otrzymuje cel, 23 00:01:39,260 --> 00:01:45,540 ponieważ ta funkcja działa na każdym elemencie tablicy, którą nazywasz, więc w tym przypadku działa na każdym celu, 24 00:01:45,540 --> 00:01:46,490 który mamy 25 00:01:46,490 --> 00:01:52,220 w bieżącej tablicy celów, a zatem otrzymujemy ten cel obecnie działa i teraz możemy zwrócić wartość 26 00:01:52,220 --> 00:01:57,890 true, jeśli chcemy zachować ten element, lub wartość false, jeśli chcemy go upuścić i chcemy zwrócić 27 00:01:57,890 --> 00:02:05,150 wartość true, jeśli identyfikator celu, na który patrzymy, nie jest równy identyfikatorowi celu, który „ otrzymujemy jako argument, ponieważ jest to 28 00:02:05,250 --> 00:02:09,560 identyfikator celu, który chcemy usunąć, więc chcemy zachować tylko te elementy, w 29 00:02:09,710 --> 00:02:14,750 których te identyfikatory się nie zgadzają, ponieważ jeśli pasują, to jest to element, którego 30 00:02:14,750 --> 00:02:16,000 chcemy się pozbyć 31 00:02:16,070 --> 00:02:19,580 i dlatego oczywiście chcę usunąć go z naszej nowej tablicy. 32 00:02:20,120 --> 00:02:25,820 Jest to logika filtrowania pozwalająca pozbyć się przedmiotu i zwrócić go tutaj jako nasz nowy stan, 33 00:02:25,820 --> 00:02:27,620 który jest później ustawiony. 34 00:02:27,620 --> 00:02:35,810 Teraz możemy połączyć program obsługi usuwania z onDelete, a teraz mamy dwie opcje lub wiele opcji zrobienia tego, możemy po prostu wskazać program 35 00:02:35,810 --> 00:02:36,760 obsługi celu 36 00:02:36,830 --> 00:02:42,200 usuwania usunąć, ale pamiętaj, że musisz przekazać identyfikator. Opcją numer jeden jest to, że przesyłasz tutaj 37 00:02:42,200 --> 00:02:50,710 również identyfikator do elementu celu, po prostu wskazując na itemData. pozycja. id, ponieważ tak jak każdy 38 00:02:50,770 --> 00:02:57,760 element ma wartość, każdy element tutaj również ma identyfikator, ponieważ dodajemy identyfikator, gdy dodajemy tam element, 39 00:02:57,760 --> 00:03:03,260 a teraz, ponieważ przekazujemy identyfikator do elementu celu i przekazujemy prop onDelete 40 00:03:03,260 --> 00:03:09,280 do elementu celu, wewnątrz elementu celu, tutaj, gdzie w końcu wywołujemy funkcję onDelete 41 00:03:09,280 --> 00:03:14,320 lub gdzie przekazujemy punkty obsługi onDelete do onPress, możemy również powiązać 42 00:03:14,320 --> 00:03:20,320 ten parametr, aby ustawić domyślny argument, gdy zostanie on wywołany, i domyślny argument 43 00:03:20,320 --> 00:03:25,900 tutaj byłby identyfikatorem rekwizytów, więc otrzymujemy również identyfikator, aby ten identyfikator był 44 00:03:25,900 --> 00:03:32,800 przekazywany do onDelete, gdy zostanie wezwany do prasy. To jest opcja numer jeden i to będzie opcja, której użyję, ale 45 00:03:32,800 --> 00:03:38,530 również, aby pokazać Ci drugą opcję. Inną opcją byłoby to, że nie przekazujesz identyfikatora do elementu celu, ale zamiast tego 46 00:03:38,530 --> 00:03:44,050 tutaj, na Usuń, wiesz na końcu, że usuń moduł obsługi celu zostanie wykonane, a następnie tutaj możesz dodać 47 00:03:44,080 --> 00:03:50,590 powiązanie, a następnie wskazać element itemData. pozycja. id, to też by działało. 48 00:03:51,040 --> 00:03:56,280 Teraz jednak cofnę to i przejdę do podejścia, w którym wszystkie informacje znajdują się w 49 00:03:56,290 --> 00:04:04,030 elemencie celu i łączymy naszą funkcję z identyfikatorem z elementu celu. Teraz powinniśmy mieć konfigurację, w której wszyscy 50 00:04:04,030 --> 00:04:06,880 możemy usunąć nasze cele. 51 00:04:06,910 --> 00:04:13,780 Poczekajmy więc na ponowne załadowanie i przetestujmy to może tutaj na iOS, chcemy nauczyć się React Native, a teraz 52 00:04:13,840 --> 00:04:17,830 chcę użyć innej nazwy, abyśmy mogli sprawdzić, czy usunęliśmy właściwą. 53 00:04:17,830 --> 00:04:26,520 Chcemy się tego wszystkiego nauczyć, być może chcemy być naprawdę dobrzy w React Native i cokolwiek to jest, a teraz kliknę, aby nauczyć się 54 00:04:26,980 --> 00:04:33,790 wszystkiego, aby to usunąć i to wydaje się działać. Tutaj Naucz się React 55 00:04:34,060 --> 00:04:35,710 Native 56 00:04:35,710 --> 00:04:40,720 i teraz ostatni. Skasuję go również tutaj, bez żadnych 57 00:04:40,750 --> 00:04:47,440 błędów, więc wydaje się, że działa to dobrze, a dzięki temu usuwamy elementy za pomocą dotykowego, dotykalnego 58 00:04:47,440 --> 00:04:54,700 krycia w tym przypadku, które pomaga rejestrować zdarzenia, takie jak onPress, na dowolnym komponencie lub na dowolnych potrzebnych elementach.