Było dużo gadania, wiele rzeczy zostało zrobionych, teraz nadszedł
czas, aby ten przycisk zadziałał i pozwól nam dodać cel tutaj,
w
tym celu, i musimy dowiedzieć się, co użytkownik wszedł, a potem oczywiście słuchaj
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
wyprowadzić tam w tym dolnym widoku, właśnie
to musimy zrobić. Teraz na tym
kursie będę używać funkcjonalnych komponentów tylko z funkcją zaczepów React, która jest stosunkowo nowa, więc
jeśli jeszcze nie znasz zaczepów React, zdecydowanie najpierw się o nich dowiedz, na przykład w
moim
React Complete Guide, dokładnie opisuję ale dołączone, znajdziesz także inne zasoby, które
pomogą Ci zacząć od haków React, ponieważ będziemy potrzebować haków React, na przykład aby uzyskać wkład użytkownika.
Użyliśmy haka useState do tego, co importujemy z React, nie z React Native, ale
z React, jest
to podstawowa funkcja React, a następnie tutaj, w tym komponencie funkcjonalnym, w tym komponencie aplikacji, możemy uzyskać wpisany
cel, a także ustawić zestaw wprowadzono funkcję celu, aby zaktualizować stan za pomocą useState i domyślnie mamy stan
początkowy, który jest pustym ciągiem, ponieważ użytkownik nie wprowadził niczego na początku.
Teraz możemy powiązać to z
wprowadzaniem tekstu, co oznacza, że gdy użytkownik wpisze znak, chcemy zaktualizować nasz stan i zapisać wprowadzony
tekst w stanie tutaj, do którego możemy uzyskać dostęp poprzez wprowadzony cel, a
my przejdziemy wprowadzony cel z powrotem do wprowadzania tekstu. To jest dwukierunkowe wiązanie, jest to tak zwany kontrolowany komponent, który znasz
również z React dla sieci z normalnymi elementami wejściowymi HTML.
Więc tutaj możemy posłuchać onChangeText, rekwizytu zapewnianego przez wprowadzanie tekstu, który przyjmuje funkcję, która będzie
wykonywana przy każdym naciśnięciu klawisza.
Teraz moglibyśmy udostępnić tutaj funkcję wbudowaną, ale możemy również skonfigurować osobną funkcję, aby
mieć nieco czystszy kod, a ty możesz mieć funkcję w funkcji i musimy ją
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
celu może być nazwą, ale nazwa należy do Ciebie. W tej funkcji automatycznie otrzymamy wprowadzony tekst,
który zostanie przekazany przez React lub React Native tutaj, a następnie możemy wywołać ustawiony wprowadzony cel i
przekazać wprowadzony tekst jako wartość, ponieważ wprowadzony tekst będzie już string, ponieważ łączymy moduł wprowadzania
danych celu z onChangeText, po prostu wskazując go tutaj. To ważne, nie dodawaj nawiasów na dole, ponieważ spowodowałoby
to wykonanie tej funkcji, gdy ten kod zostanie przeanalizowany, więc gdy interfejs użytkownika
jest renderowany po raz pierwszy. Nie chcesz tego jednak wykonywać od
razu, chcesz go wykonywać przy każdym naciśnięciu klawisza, dlatego po prostu bierzesz nazwę funkcji, przekazujesz
tę nazwę funkcji do onChangeText i to skutecznie mówi React Native, hej, to jest funkcję, którą
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.
Teraz zamiast tej składni funkcji, możesz przy okazji użyć innej składni, której będę używać
podczas całego kursu, w której tworzysz stałą o tej nazwie tutaj, a następnie wartość tej
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
lista argumentów i to jest treść funkcji. To jest normalna składnia Javascript, jest obsługiwana przez
kod JavaScript React Native jest w stanie działać, a zatem jest to składnia, której użyję,
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
stan za pomocą tego, co użytkownik wprowadził przy każdym naciśnięciu klawisza,
teraz musimy również przekazać ten tekst z powrotem do wprowadzania tekstu, aby był tam wyświetlany poprawnie, po prostu wiążąc
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.
Dzięki temu uzyskujemy dostęp do danych wejściowych użytkownika, ponieważ teraz będą
one zawsze przechowywane w wpisanym celu. Teraz, gdy użytkownik naciśnie przycisk, chcemy użyć wprowadzonego celu,
więc w tym celu dodam tutaj inną funkcję, dodaj moduł obsługi celu i to jest tylko konwencja nazewnictwa, której
używam dla tych funkcji tutaj, możesz nazwać je niezależnie od chcesz, bez względu na to,
do czego jesteś przyzwyczajony z aplikacji React, w końcu nazwa funkcji powinna po prostu opisać, co się wydarzy, i
ż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ę
dodać mój wpisany cel do listy celów i nie mamy jeszcze żadnej listy, więc na razie
to, co tutaj robię, to dziennik konsoli, który jest obsługiwany w React Natywny, wprowadzony cel, abyśmy przynajmniej widzieli, że został on
poprawnie zapisany i że ta funkcja jest wykonana. Aby to wykonać, musimy jednak
podłączyć go do przycisku, tam możemy dodać prop onPress i wskazać na funkcję
dodawania celu, ponownie bez nawiasów, aby nie wykonało się to natychmiast, ale tylko w przypadku naciśnięcia.
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
prawdziwej klawiatury i nacisnąć add i powinieneś zobaczyć tutaj w swoim terminalu ten dziennik, zobaczysz to również tak przy okazji, w
narzędziach do tworzenia expo tutaj, w zakładce przeglądarki. Tam, jeśli klikniesz jedno z podłączonych urządzeń,
to, w którym po prostu klikniesz przycisk w moim przypadku,
urządzenie z Androidem, a tam u dołu zobaczysz również Learn React Native.
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
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
samym dole widzimy ten dziennik. Okej, więc otrzymujemy
dane od użytkowników, przechowujemy je, logujemy się do konsoli, oczywiście
nie chcemy logować się do konsoli, chcemy wyprowadzić je poniżej naszego wpisu tutaj,
chcemy lista naszych celów poniżej tego obszaru wprowadzania. Dlatego potrzebujemy tutaj drugiego widoku, który powinien wypisać naszą listę przedmiotów.
Tak więc między tagami otwierającym i zamykającym chcę wypisać wszystkie
dodane elementy, wszystkie dodane cele. W tym celu musimy przede wszystkim zarządzać
naszymi celami i możemy ustawić inny stan dla tego, który początkowo jest pustą tablicą, stąd przekazuję
pustą tablicę jako wartość do użycia Stan i tam mamy nasze cele kursu i ustalone cele kursu funkcjonować.
Teraz te nazwy są zawsze od Ciebie, ale powinny opisywać, co jest w twoim stanie i jak
możesz je zaktualizować.
Więc teraz tutaj, kiedy dodajemy cel, chcę zaktualizować moje cele kursu, aby dodać nowy
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
dodaję nowy.
Teraz jest to składnia, której możesz nie znać, to
tak zwany operator rozprzestrzeniania, jest to funkcja JavaScript, która przyjmuje istniejącą tablicę, a cele kursu
to tablica, to nasza migawka obecnego stanu przed aktualizacją i wyciąga z niej wszystkie elementy tablica, a następnie dodaje je tutaj
do nowej tablicy, dlatego mam otaczające nawiasy kwadratowe, bez tych otaczających nawiasów kwadratowych to
nie
działałoby, ale teraz tworzymy nową tablicę i dodajemy wszystkie elementy starej tablicy i teraz możemy
dodaj także nowy element.
Więc tutaj dodaję przecinek, aby
dodać dodatkowy element po wszystkich elementach, które tu wyciągam, a element, który tu dodam, jest oczywiście moim celem.
Tak więc teraz aktualizujemy naszą listę celów o starą listę
celów, początkowo pustą listę, ale potem ta liczba będzie rosła z czasem, ponieważ
następnie dodamy nowy cel po naciśnięciu tego przycisku. Teraz drobna uwaga, podczas pracy z ustalonymi celami
kursu, cele kursu są naszym poprzednim stanem i sposób,
w jaki React aktualizuje stan, powinien zawsze być twoją najnowszą migawką stanu, ale nie jest w
100% gwarantowany, aby mieć tę 100% gwarancję , kiedy aktualizujesz swój
stan w oparciu o stary stan, możesz użyć formy funkcji tej funkcji zestawu, w której
nie
przekazujesz tutaj wartości nowego stanu, ale zamiast tego przekazujesz ją w funkcji, zwykle w funkcji anonimowej, w
której pobierz swój aktualny stan lub aktualne cele, więc twoja migawka bieżącego stanu, a następnie zwróć zaktualizowaną
wartość, więc tutaj zwracam moją zaktualizowaną tablicę z tą składniową funkcją strzałki, gdzie jeśli masz tylko jedno wyrażenie,
możesz pominąć nawiasy klamrowe i instrukcja return i po prostu wprowadź wartość, którą
chcesz zwrócić, a ona zostanie
zwrócona, i to wszystko jest normalne JavaScript, nic React Native Native.
Więc tutaj biorę moje obecne cele, a następnie dodaję wpisany cel. Ta składnia jest nieco lepsza, druga też
by działała, ale gwarantuje to, że zawsze będzie działać,
ponieważ React Native będzie tutaj zawsze oferował gwarancję, najnowszą migawkę stanu, zanim zastosuje tutaj
zmianę stanu.
Teraz to miłe, będziemy mieć listę, szereg celów zarządzanych tutaj. Jak możemy teraz to generować?