Więc spędziliśmy trochę czasu na danych wejściowych, ale obsługa danych wejściowych użytkownika jest
ważna, chcesz to zrobić w sposób, który jest dla
użytkownika naturalny, ma sens
dla użytkownika i gdzie nigdy nie będziesz ufać swojemu użytkownikowi i zawsze sprawdzasz, co użytkownik wchodzi
i zagłębimy się w całą tę kwestię sprawdzania
poprawności, wprowadzanie danych przez użytkownika w dalszej części kursu, w którym akceptujemy również bardziej złożone
dane
wejściowe niż zwykłą liczbę, ale na razie było to świetne pierwsze spojrzenie na to, jak możesz
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ł
czas, aby przejść do naszej gry, ponieważ utknęliśmy tutaj,
są to wszystkie ważne kroki, ale tak naprawdę nie postępujemy z naszą grą lub naszą aplikacją tutaj .
Upewnijmy się więc, że zrobimy to jako kolejny krok, i
dlaczego nie upewnimy się, że nasze przyciski coś robią? Zacznijmy od przycisku resetowania naprawdę szybko, ponieważ będzie
to prosty. Kiedy go
naciśniesz, oczywiście po prostu chcę zresetować wprowadzoną wartość. Więc zarejestruję tam nową funkcję w komponencie
ekranu startowego gry, nadam jej nazwę resetujący moduł obsługi wejścia i to tylko konwencja nazewnictwa,
którą lubię, nazwij te funkcje, które są uruchamiane po zdarzeniu użytkownika, coś na końcu, tylko po to, aby to
zrobić jasne, że obsługują one określone
zdarzenia, nie jest to konieczne, po prostu preferuję ogólnie aplikacje React, a zatem także aplikacje React
Native.
Będzie to funkcja, która następnie wywoła ustawioną wartość, która jest tutaj naszą funkcją ustawiania stanu, aby zaktualizować
stan, który przekazujemy z powrotem do wejścia i ustawić go na pusty ciąg
i tak, dzięki czemu możemy podłączyć to tutaj do przycisku resetowania, onPress powinien teraz po prostu wykonać procedurę
obsługi wejścia resetowania w ten sposób.
Spróbujmy
szybko, wpiszmy tutaj coś, zresetujmy
i zniknęło,
to wygląda dobrze, a
także upewnij
się, że ten przycisk tutaj, przycisk potwierdzenia coś robi. W tym celu dodam kolejny przycisk, potwierdzę procedurę wprowadzania danych i moglibyśmy po prostu
rozpocząć grę natychmiast tutaj, ale również po to,
aby ćwiczyć, chcę dać użytkownikowi ostatnią szansę na zmianę jego wyboru, więc tutaj chcę tylko trochę wyjścia jest to twój
wybór, czy
chcesz rozpocząć wiadomość, w której wtedy użytkownik dostaje przycisk, aby rozpocząć grę, tylko dodatkowy krok, więc
mamy tutaj dodatkową praktykę. W tym celu
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
to zmienić i chcemy być w stanie uzyskać bieżący stan.
Tutaj otrzymujemy, czy użytkownik potwierdził, czy nie i możemy ustawić
ten potwierdzony stan za pomocą tego drugiego elementu w wyodrębnianej tablicy. Tak więc na dole w potwierdzeniu procedury
wprowadzania danych, ustawiłem potwierdzenie na wartość true, przy okazji zresetowania procedury obsługi danych wejściowych, ustawiłem to na wartość false, ponieważ
jeśli użytkownik kliknie reset, użytkownik z pewnością musi potwierdzić wartości, więc powinniśmy to zresetować,
a następnie tutaj w module obsługi wprowadzania potwierdzeń
chcę również zrobić dwie różne rzeczy, dwie inne rzeczy.
Jednym z nich jest zresetowanie wprowadzonej wartości, ale oczywiście zapisanie wprowadzonej wartości jako wartości, od której
chcielibyśmy rozpocząć grę.
Możemy to zrobić w
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
to być wybrany numer, a teraz powinien być naprawdę liczbą, a nie tekstem.
Więc tutaj mamy wybrany numer i funkcję, aby
go ustawić, a kiedy użytkownik kliknie, potwierdź, zanim zresetuję wprowadzoną wartość, chociaż tutaj i tak wszystko zostanie spakowane razem,
więc możemy również użyć wprowadzonej wartości tutaj po ustawieniu jej na pusty ciąg, ponieważ zostanie
to wykonane tylko w następnym cyklu renderowania, a nie bezpośrednio po wykonaniu tego wiersza.
Możemy więc nadal bezpiecznie wykonywać lub uzyskiwać dostęp do tej wprowadzonej wartości,
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ę
uzyskać dostęp wprowadzono
tutaj wartość, nawet jeśli ją zresetujemy, ponieważ ta czynność resetowania w zasadzie będzie w
kolejce przez React i zostanie przetworzona dopiero przy następnym renderowaniu komponentu, a wszystkie
te
trzy zmiany stanu zostaną zebrane razem w jeden cykl renderowania, więc możemy bezpiecznie uzyskać dostęp do wprowadzonej
tutaj wartości, ale możemy to również zrobić przed zresetowaniem, to
nie ma znaczenia.
Ważną rzeczą jest jednak to, że analizujemy to jako liczbę całkowitą, aby przekonwertować ten tekst na
liczbę tutaj i faktycznie dodam kolejny dodatkowy krok, zanim to zrobię. Na samym początku będę tutaj miał wybrany
numer, który jest tą analizowaną liczbą,
a zanim cokolwiek zrobię, chcę sprawdzić, czy wybrany numer nie jest liczbą, która jest domyślną wartością Javascript, więc
jeśli w jakiś sposób nadal nie jest liczba, mimo że próbujemy sprawdzić, czy nie ma nieprawidłowych znaków
lub czy wybrana liczba jest mniejsza lub równa zero.
Jeśli tak, to po prostu chcę
wrócić, nie
chcę kontynuować, więc return zakończy działanie funkcji i nie potwierdzi, nie użyje tego jako
wartości, ponieważ wartość jest
nieprawidłowa, dozwolone są tylko liczby dodatnie i nie są dozwolone nieprawidłowe numery.
Ponadto chcę dodać jeden dodatkowy czek i sprawdzić, czy wybrana liczba może być większa niż 99, ponieważ to również
nie byłoby dozwolone, chcę mieć
liczbę od 1 do 99 i powinna to być liczba. Jeśli to nie pasuje do tych kryteriów, wrócimy,
w przeciwnym razie ustawimy wybrany numer jako wybrany numer, a następnie zresetujemy dane wejściowe, a następnie te
trzy wywołania stanu zostaną zestawione razem, a komponent zostanie zrenderowany i wprowadzimy nowy
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
do przycisku potwierdzenia, a teraz byłoby miło zobaczyć, że potwierdzenie wizualne działało,
lub też pojawił się błąd, jeśli naruszyliśmy jedną z tych reguł tutaj, więc nie tylko wróć, ale
pokaż też alert.
Może zacznijmy od informacji zwrotnej, zanim zaczniemy pracę nad alertem. Aby uzyskać informacje zwrotne, tutaj
poniżej tej funkcji, ale wewnątrz naszego funkcjonalnego komponentu, chcę sprawdzić, czy potwierdziliśmy, a następnie ustawić jakieś
specjalne treści, które powinny zostać wyświetlone.
Mamy więc potwierdzone wyjście, które normalnie jest
po prostu niezdefiniowane, ale jeśli potwierdziliśmy, to potwierdzeniem jest jakiś kod jsx, w którym podsumowujemy to, co
użytkownik wprowadził i dajemy mu przycisk uruchamiania gry.
Teraz, aby zobaczyć, czy to działa, przejdźmy tutaj z tekstem i powiedzmy wybraną liczbę i
wyślij tutaj wybraną liczbę, wybraną liczbę, to
jest nasz stan, którym tu zarządzamy.
Tak więc, ponieważ nazywamy zestaw potwierdzony i tak dalej, komponent zostanie ponownie wyrenderowany po wybraniu
tej opcji, więc cała funkcja komponentu zostanie uruchomiona ponownie, co oznacza, że potwierdzone
będzie wówczas prawdziwe dla następnego uruchomienia, ponieważ ustawiliśmy tutaj wartość true i
dlatego
ustawimy potwierdzony wynik jako ten tekst, a teraz możemy dodać potwierdzony wynik, powiedzmy tutaj poniżej naszej karty.
Więc chcę wyprowadzić potwierdzone wyjście, które jest albo niezdefiniowane, nie drukuje
niczego
na ekranie lub jest to ten tekst. Z tym zapisanym, jeśli wrócimy, a ja wprowadzę numer i potwierdzę go tutaj, zobaczymy
numer.
Jeśli wprowadzę coś niepoprawnego, np. Zero, nie widzimy
tego, więc wydaje się, że nasz test działa i wypisywana jest poprawna liczba.
To nie jest ostateczny projekt, który chcę mieć, ale to dowodzi, że działa.
Zanim sfinalizujemy ten projekt, upewnijmy się, że pokazujemy również alert, jeśli wprowadzono coś nieważnego.