1
00:00:02,350 --> 00:00:06,760
Więc spędziliśmy trochę czasu na danych wejściowych, ale obsługa danych wejściowych użytkownika jest

2
00:00:06,760 --> 00:00:09,970
ważna, chcesz to zrobić w sposób, który jest dla

3
00:00:09,970 --> 00:00:11,470
użytkownika naturalny, ma sens

4
00:00:11,590 --> 00:00:17,000
dla użytkownika i gdzie nigdy nie będziesz ufać swojemu użytkownikowi i zawsze sprawdzasz, co użytkownik wchodzi

5
00:00:17,020 --> 00:00:19,750
i zagłębimy się w całą tę kwestię sprawdzania

6
00:00:19,750 --> 00:00:24,760
poprawności, wprowadzanie danych przez użytkownika w dalszej części kursu, w którym akceptujemy również bardziej złożone

7
00:00:24,760 --> 00:00:25,520
dane

8
00:00:25,540 --> 00:00:31,030
wejściowe niż zwykłą liczbę, ale na razie było to świetne pierwsze spojrzenie na to, jak możesz

9
00:00:31,210 --> 00:00:37,910
stylizować takie dane wejściowe oraz sposób uzyskania niezbędnych danych. W związku z tym nie wiem o tobie, ale myślę, że nadszedł

10
00:00:37,920 --> 00:00:40,710
czas, aby przejść do naszej gry, ponieważ utknęliśmy tutaj,

11
00:00:40,710 --> 00:00:45,600
są to wszystkie ważne kroki, ale tak naprawdę nie postępujemy z naszą grą lub naszą aplikacją tutaj .

12
00:00:45,600 --> 00:00:49,520
Upewnijmy się więc, że zrobimy to jako kolejny krok, i

13
00:00:49,530 --> 00:00:56,690
dlaczego nie upewnimy się, że nasze przyciski coś robią? Zacznijmy od przycisku resetowania naprawdę szybko, ponieważ będzie

14
00:00:56,690 --> 00:00:58,760
to prosty. Kiedy go

15
00:00:58,790 --> 00:01:04,400
naciśniesz, oczywiście po prostu chcę zresetować wprowadzoną wartość. Więc zarejestruję tam nową funkcję w komponencie

16
00:01:04,410 --> 00:01:10,310
ekranu startowego gry, nadam jej nazwę resetujący moduł obsługi wejścia i to tylko konwencja nazewnictwa,

17
00:01:10,310 --> 00:01:17,450
którą lubię, nazwij te funkcje, które są uruchamiane po zdarzeniu użytkownika, coś na końcu, tylko po to, aby to

18
00:01:17,450 --> 00:01:19,840
zrobić jasne, że obsługują one określone

19
00:01:19,970 --> 00:01:26,210
zdarzenia, nie jest to konieczne, po prostu preferuję ogólnie aplikacje React, a zatem także aplikacje React

20
00:01:26,210 --> 00:01:27,040
Native.

21
00:01:27,260 --> 00:01:34,040
Będzie to funkcja, która następnie wywoła ustawioną wartość, która jest tutaj naszą funkcją ustawiania stanu, aby zaktualizować

22
00:01:34,220 --> 00:01:39,370
stan, który przekazujemy z powrotem do wejścia i ustawić go na pusty ciąg

23
00:01:39,460 --> 00:01:46,690
i tak, dzięki czemu możemy podłączyć to tutaj do przycisku resetowania, onPress powinien teraz po prostu wykonać procedurę

24
00:01:46,700 --> 00:01:49,540
obsługi wejścia resetowania w ten sposób.

25
00:01:49,700 --> 00:01:50,780
Spróbujmy

26
00:01:50,780 --> 00:01:53,760
szybko, wpiszmy tutaj coś, zresetujmy

27
00:01:53,780 --> 00:01:55,110
i zniknęło,

28
00:01:55,310 --> 00:01:57,440
to wygląda dobrze, a

29
00:01:57,470 --> 00:01:58,790
także upewnij

30
00:01:58,790 --> 00:02:09,390
się, że ten przycisk tutaj, przycisk potwierdzenia coś robi. W tym celu dodam kolejny przycisk, potwierdzę procedurę wprowadzania danych i moglibyśmy po prostu

31
00:02:09,420 --> 00:02:12,600
rozpocząć grę natychmiast tutaj, ale również po to,

32
00:02:12,600 --> 00:02:20,030
aby ćwiczyć, chcę dać użytkownikowi ostatnią szansę na zmianę jego wyboru, więc tutaj chcę tylko trochę wyjścia jest to twój

33
00:02:20,200 --> 00:02:21,090
wybór, czy

34
00:02:21,090 --> 00:02:27,050
chcesz rozpocząć wiadomość, w której wtedy użytkownik dostaje przycisk, aby rozpocząć grę, tylko dodatkowy krok, więc

35
00:02:27,360 --> 00:02:30,910
mamy tutaj dodatkową praktykę. W tym celu

36
00:02:30,930 --> 00:02:38,800
dodam nowy stan, który zarządza tym, czy użytkownik potwierdził jeszcze stan i początkowo jest to fałsz, ale oczywiście możemy

37
00:02:38,910 --> 00:02:43,020
to zmienić i chcemy być w stanie uzyskać bieżący stan.

38
00:02:43,020 --> 00:02:45,980
Tutaj otrzymujemy, czy użytkownik potwierdził, czy nie i możemy ustawić

39
00:02:45,990 --> 00:02:52,410
ten potwierdzony stan za pomocą tego drugiego elementu w wyodrębnianej tablicy. Tak więc na dole w potwierdzeniu procedury

40
00:02:52,410 --> 00:03:00,160
wprowadzania danych, ustawiłem potwierdzenie na wartość true, przy okazji zresetowania procedury obsługi danych wejściowych, ustawiłem to na wartość false, ponieważ

41
00:03:00,160 --> 00:03:05,710
jeśli użytkownik kliknie reset, użytkownik z pewnością musi potwierdzić wartości, więc powinniśmy to zresetować,

42
00:03:05,710 --> 00:03:09,110
a następnie tutaj w module obsługi wprowadzania potwierdzeń

43
00:03:09,160 --> 00:03:12,750
chcę również zrobić dwie różne rzeczy, dwie inne rzeczy.

44
00:03:12,880 --> 00:03:20,530
Jednym z nich jest zresetowanie wprowadzonej wartości, ale oczywiście zapisanie wprowadzonej wartości jako wartości, od której

45
00:03:20,530 --> 00:03:22,300
chcielibyśmy rozpocząć grę.

46
00:03:22,390 --> 00:03:24,840
Możemy to zrobić w

47
00:03:24,880 --> 00:03:34,430
jeszcze innym zarządzanym przez nas stanie, który początkowo nie ma nic, nie ma żadnej wartości, początkowo jest niezdefiniowany, ponieważ powinien

48
00:03:34,430 --> 00:03:40,370
to być wybrany numer, a teraz powinien być naprawdę liczbą, a nie tekstem.

49
00:03:40,910 --> 00:03:44,400
Więc tutaj mamy wybrany numer i funkcję, aby

50
00:03:44,480 --> 00:03:51,560
go ustawić, a kiedy użytkownik kliknie, potwierdź, zanim zresetuję wprowadzoną wartość, chociaż tutaj i tak wszystko zostanie spakowane razem,

51
00:03:51,610 --> 00:03:57,290
więc możemy również użyć wprowadzonej wartości tutaj po ustawieniu jej na pusty ciąg, ponieważ zostanie

52
00:03:57,470 --> 00:04:02,540
to wykonane tylko w następnym cyklu renderowania, a nie bezpośrednio po wykonaniu tego wiersza.

53
00:04:02,540 --> 00:04:07,530
Możemy więc nadal bezpiecznie wykonywać lub uzyskiwać dostęp do tej wprowadzonej wartości,

54
00:04:07,730 --> 00:04:17,930
jeśli chcemy, ponieważ tutaj chcę ustawić wprowadzoną wartość za pomocą analizy składni, przekazując wprowadzoną wartość, więc ustawiłem ją jako mój wybrany numer i ponownie mogę

55
00:04:18,050 --> 00:04:19,300
uzyskać dostęp wprowadzono

56
00:04:19,340 --> 00:04:24,980
tutaj wartość, nawet jeśli ją zresetujemy, ponieważ ta czynność resetowania w zasadzie będzie w

57
00:04:25,190 --> 00:04:30,740
kolejce przez React i zostanie przetworzona dopiero przy następnym renderowaniu komponentu, a wszystkie

58
00:04:30,740 --> 00:04:31,480
te

59
00:04:31,580 --> 00:04:38,660
trzy zmiany stanu zostaną zebrane razem w jeden cykl renderowania, więc możemy bezpiecznie uzyskać dostęp do wprowadzonej

60
00:04:38,660 --> 00:04:42,850
tutaj wartości, ale możemy to również zrobić przed zresetowaniem, to

61
00:04:42,860 --> 00:04:44,200
nie ma znaczenia.

62
00:04:44,210 --> 00:04:49,520
Ważną rzeczą jest jednak to, że analizujemy to jako liczbę całkowitą, aby przekonwertować ten tekst na

63
00:04:49,520 --> 00:04:57,050
liczbę tutaj i faktycznie dodam kolejny dodatkowy krok, zanim to zrobię. Na samym początku będę tutaj miał wybrany

64
00:04:57,140 --> 00:05:00,410
numer, który jest tą analizowaną liczbą,

65
00:05:00,410 --> 00:05:08,660
a zanim cokolwiek zrobię, chcę sprawdzić, czy wybrany numer nie jest liczbą, która jest domyślną wartością Javascript, więc

66
00:05:08,660 --> 00:05:16,550
jeśli w jakiś sposób nadal nie jest liczba, mimo że próbujemy sprawdzić, czy nie ma nieprawidłowych znaków

67
00:05:16,550 --> 00:05:20,730
lub czy wybrana liczba jest mniejsza lub równa zero.

68
00:05:21,200 --> 00:05:24,140
Jeśli tak, to po prostu chcę

69
00:05:24,140 --> 00:05:25,430
wrócić, nie

70
00:05:25,460 --> 00:05:31,580
chcę kontynuować, więc return zakończy działanie funkcji i nie potwierdzi, nie użyje tego jako

71
00:05:31,850 --> 00:05:33,710
wartości, ponieważ wartość jest

72
00:05:33,830 --> 00:05:39,010
nieprawidłowa, dozwolone są tylko liczby dodatnie i nie są dozwolone nieprawidłowe numery.

73
00:05:39,020 --> 00:05:46,340
Ponadto chcę dodać jeden dodatkowy czek i sprawdzić, czy wybrana liczba może być większa niż 99, ponieważ to również

74
00:05:46,350 --> 00:05:48,770
nie byłoby dozwolone, chcę mieć

75
00:05:48,770 --> 00:05:56,600
liczbę od 1 do 99 i powinna to być liczba. Jeśli to nie pasuje do tych kryteriów, wrócimy,

76
00:05:56,840 --> 00:06:03,740
w przeciwnym razie ustawimy wybrany numer jako wybrany numer, a następnie zresetujemy dane wejściowe, a następnie te

77
00:06:03,740 --> 00:06:09,440
trzy wywołania stanu zostaną zestawione razem, a komponent zostanie zrenderowany i wprowadzimy nowy

78
00:06:09,440 --> 00:06:17,790
stan, w którym ten numer zostanie uwzględniony jako wybrany numer. Teraz możemy podłączyć tutaj funkcję obsługi wejścia potwierdzającego

79
00:06:17,790 --> 00:06:23,700
do przycisku potwierdzenia, a teraz byłoby miło zobaczyć, że potwierdzenie wizualne działało,

80
00:06:23,700 --> 00:06:32,220
lub też pojawił się błąd, jeśli naruszyliśmy jedną z tych reguł tutaj, więc nie tylko wróć, ale

81
00:06:32,220 --> 00:06:34,440
pokaż też alert.

82
00:06:35,320 --> 00:06:41,870
Może zacznijmy od informacji zwrotnej, zanim zaczniemy pracę nad alertem. Aby uzyskać informacje zwrotne, tutaj

83
00:06:42,650 --> 00:06:51,710
poniżej tej funkcji, ale wewnątrz naszego funkcjonalnego komponentu, chcę sprawdzić, czy potwierdziliśmy, a następnie ustawić jakieś

84
00:06:51,710 --> 00:06:54,990
specjalne treści, które powinny zostać wyświetlone.

85
00:06:55,010 --> 00:06:58,900
Mamy więc potwierdzone wyjście, które normalnie jest

86
00:06:58,970 --> 00:07:07,340
po prostu niezdefiniowane, ale jeśli potwierdziliśmy, to potwierdzeniem jest jakiś kod jsx, w którym podsumowujemy to, co

87
00:07:07,340 --> 00:07:11,330
użytkownik wprowadził i dajemy mu przycisk uruchamiania gry.

88
00:07:11,330 --> 00:07:18,990
Teraz, aby zobaczyć, czy to działa, przejdźmy tutaj z tekstem i powiedzmy wybraną liczbę i

89
00:07:19,020 --> 00:07:22,470
wyślij tutaj wybraną liczbę, wybraną liczbę, to

90
00:07:22,470 --> 00:07:25,700
jest nasz stan, którym tu zarządzamy.

91
00:07:25,770 --> 00:07:32,100
Tak więc, ponieważ nazywamy zestaw potwierdzony i tak dalej, komponent zostanie ponownie wyrenderowany po wybraniu

92
00:07:32,100 --> 00:07:38,010
tej opcji, więc cała funkcja komponentu zostanie uruchomiona ponownie, co oznacza, że potwierdzone

93
00:07:38,040 --> 00:07:43,470
będzie wówczas prawdziwe dla następnego uruchomienia, ponieważ ustawiliśmy tutaj wartość true i

94
00:07:43,500 --> 00:07:44,310
dlatego

95
00:07:44,310 --> 00:07:51,820
ustawimy potwierdzony wynik jako ten tekst, a teraz możemy dodać potwierdzony wynik, powiedzmy tutaj poniżej naszej karty.

96
00:07:51,820 --> 00:07:57,340
Więc chcę wyprowadzić potwierdzone wyjście, które jest albo niezdefiniowane, nie drukuje

97
00:07:57,340 --> 00:07:57,940
niczego

98
00:07:58,060 --> 00:08:05,900
na ekranie lub jest to ten tekst. Z tym zapisanym, jeśli wrócimy, a ja wprowadzę numer i potwierdzę go tutaj, zobaczymy

99
00:08:05,900 --> 00:08:06,410
numer.

100
00:08:06,950 --> 00:08:10,210
Jeśli wprowadzę coś niepoprawnego, np. Zero, nie widzimy

101
00:08:10,250 --> 00:08:15,360
tego, więc wydaje się, że nasz test działa i wypisywana jest poprawna liczba.

102
00:08:15,400 --> 00:08:19,200
To nie jest ostateczny projekt, który chcę mieć, ale to dowodzi, że działa.

103
00:08:19,390 --> 00:08:26,170
Zanim sfinalizujemy ten projekt, upewnijmy się, że pokazujemy również alert, jeśli wprowadzono coś nieważnego.