Tak więc przycisk dodawania w tym miejscu wywołuje AddGoal, co zasadniczo przekazuje cel do aplikacji. js, czego dokładnie potrzebujemy, ale musimy
również
upewnić się, że kiedy dodamy nowy cel, modal zostanie zamknięty.
Pamiętaj, że ostatecznie kontrolujemy widoczność modalną z poziomu aplikacji. plik js, ponieważ tam mamy stan
isAddMode, który zmieniamy po kliknięciu tego przycisku, na przykład przycisk dodawania nowego celu
i
ta wartość stanu, isAddMode, jest przekazywany do danych wejściowych celu, gdzie następnie używamy go do
kontrolowania widoczności modalny.
Aby więc upewnić się, że modal zniknie, musimy po prostu zmienić
isAddMode ponownie w aplikacji. plik js, ponieważ nowa wartość zostanie następnie automatycznie przekazana do danych wejściowych celu.
Więc wszystko, co musimy zrobić, to dodać moduł obsługi celu, w którym ustalamy cele
kursu, musimy również ustawić isAddMode na false, ponieważ skończyliśmy dodawanie. Teraz mała uwaga, sposób, w jaki React działa, jeśli ustawiasz
dwa stany po sobie, grupuje je razem,
nie będzie ponownie renderować
komponentu dwa razy po pierwszej zmianie i po drugiej zmianie, zamiast tego będzie zasadniczo stosować wszystkie
zmiany stanu na raz i tylko renderowanie komponentu raz, co oczywiście jest dobre, w przeciwnym
razie
mielibyśmy tam niepotrzebny cykl ponownego renderowania i jest to
po prostu dobra optymalizacja, którą robi dla nas React. Możemy więc absolutnie zmienić dwa różne stany po sobie w
ten sposób, a dzięki temu
modal powinien wiedzieć, że faktycznie zniknie, jeśli ustawimy to na false. Przetestujmy to tutaj na
iOS.
Jeśli dodam tutaj naucz się React Native, kliknij dodaj, to
zniknie, a teraz dowiedz się więcej, to również działa i nadal
mogę usuwać elementy.
Teraz, aby przetestować to na Androidzie, tak samo jak poprzednio,
uruchommy to ponownie na
Androidzie, kliknij dodaj nowy cel i dowiedz się React Native tutaj, kliknij dodaj i
to zamyka, teraz nauczmy się tutaj więcej, podobnie jak to i działa poprawnie. Teraz dwie małe poprawki, które wciąż chcę zastosować, na przykład chcę wyczyścić
dane wejściowe, gdy skończymy, a ponadto chcę udostępnić przycisk anulowania, aby zamiast
dodawać to, możemy również anulować tutaj, aby zamknąć modal bez dodawania przedmiotu, ponieważ w
tej chwili nie możemy tego zrobić.
Zacznijmy od wyczyszczenia naszego wkładu tutaj
po tym, jak coś wprowadziliśmy. W tym celu przy wprowadzaniu celu
ostatecznie wprowadziliśmy
cel i musimy go zresetować po dodaniu nowego celu. Teraz oczywiście dodajemy nowy cel, kiedy wciskamy ten
przycisk dodawania, a na końcu uruchamiamy funkcję, którą otrzymujemy za pomocą prop onAddGoal.
Teraz, aby wyczyścić nasze dane wejściowe, możemy tutaj dodać funkcję wewnątrz elementu wejściowego
celu, dodać moduł obsługi celu lub jakkolwiek chcesz go nazwać, jest
to funkcja, która nie musi brać żadnych argumentów i w końcu teraz jest to funkcja, którą
chcę uruchomić.
Chcę więc uruchomić dodawanie modułów obsługi
celu, więc moja własna funkcja w tym komponencie. Teraz tutaj chcę wywołać rekwizyty na AddGoal bez
wiązania tutaj, możemy po prostu wywołać to w ten sposób, ponieważ kiedy ta funkcja działa, chcę
ją wykonać, tutaj po prostu przekazujemy wskaźnik tej funkcji bez
nawiasów, więc tutaj nie mogą mieć nawiasów, aby nie wykonać tego zbyt wcześnie,
tutaj absolutnie potrzebujemy nawiasów, ponieważ działa to tylko wtedy, gdy ta funkcja jest wykonywana
i wtedy chcę uruchomić funkcję w
moim komponencie nadrzędnym, więc tutaj w komponencie aplikacji. I tutaj na onAddGoal, oczywiście nadal chcę przekazać mój wpisany
cel
tutaj, więc ten stan, chcę to przekazać dalej, ale później też chcę go wyczyścić.
Następnie ustawię ponownie wprowadzony
cel na pusty ciąg znaków, co spowoduje zresetowanie wprowadzonego tutaj tekstu.
Więc to jedna
rzecz, drugą rzeczą jest przycisk, który pozwala nam to zamknąć. W tym celu możemy dodać tutaj przycisk, który
może mieć tytuł anulowania, ponieważ w końcu to
powinien zrobić ten przycisk i
anulować
przycisk, fajnie byłoby nie mieć domyślnego niebieskiego koloru, ale zmienić ten kolor,
a można to zrobić, dodając tutaj prop kolor, na przykład
możemy ustawić tutaj kolor czerwony, ponieważ moim zdaniem czerwony jest dobrym kolorem do anulowania przycisk.
Jeśli zapiszemy to i przetestujemy to tutaj na iOS, zobaczymy
przycisk anulowania i przycisk dodawania,
a teraz, jeśli nauczę się React Native tutaj i dodam to, to zostanie dodane, a jeśli ponownie je
otworzę, zobaczysz, że zostało wyczyszczone i anulowanie oczywiście nic nie robi, ponieważ musimy połączyć anulować z komponentem aplikacji,
w którym kontrolujemy widoczność poprzez kontrolowanie isAddMode.
Więc tutaj możemy teraz dodać kolejny moduł obsługi funkcji w składniku aplikacji, anulować moduł obsługi celu lub coś takiego, to bardzo długa
nazwa,
chcę tylko jasno powiedzieć, co to robi i kiedy jest wywoływane.
Więc tutaj mamy dodatkowy moduł obsługi celu anulowania, a na koniec tutaj możemy po prostu
ustawić isAddMode na false,
co zamknie modal i oczywiście
nie robimy nic innego, nie zmieniamy naszych celów kursu, ponieważ anulowaliśmy dodanie i teraz możemy
przekazać to do elementu celu,
do danych wejściowych celu, więc do naszego komponentu tutaj. Tam możemy dodać rekwizyt onCancel, nazwa tego rekwizytu oczywiście
zależy od ciebie, ponieważ jest to twoja
rekwizyt na twoim własnym komponencie, a ja przesłałem wskaźnik w funkcji anulowania dodawania celu
do onCancel i teraz wewnątrz wprowadzania celu, możemy uruchom on Anuluj po naciśnięciu tego przycisku.
Więc tutaj dodajemy onPress i chcemy uruchamiać rekwizyty. onCancel tutaj, więc funkcja,
którą otrzymujemy na naszej propozycji onCancel. Dzięki temu przycisk anulowania powinien działać, tak
działa dobrze.
Teraz powinien również oczywiście działać na Androidzie,
ale aby
go przetestować, tak samo jak zawsze, zamknijmy go
i uruchommy ponownie, a następnie zobaczmy, czy wyczyszczenie wejścia działa. Jeśli wejdę lub nauczę się React Native tutaj, kliknij dodaj, tak, to jest
puste i anuluj działa również.
Jeśli chodzi o stylizację tutaj na Androidzie, byłoby miło mieć trochę odstępów między
przyciskami lub faktycznie na obu platformach, może te przyciski będą obok siebie.