Jak inaczej możemy to zoptymalizować?
Cóż, możesz zauważyć, że ten kod jsx tutaj może być wielokrotnie powtarzany, każde wejście
wygląda tak.
Mamy widok, mamy etykietę z samym wprowadzaniem tekstu i możemy również chcieć wyświetlać
tekst błędu.
Dlatego sensowne byłoby zlecenie tego na osobny komponent
i właśnie to chcę zrobić.
Pójdę do mojego folderu komponentów i tam w folderze interfejsu użytkownika dodam dane wejściowe. plik js, który będzie zawierał komponent React, więc
importuję oczywiście reaguj od zareaguj, a następnie importuję kilka rzeczy z React Native,
a na końcu są to mój widok, komponent tekstowy, komponent wprowadzania tekstu i arkusz stylów, ponieważ
„ Potrzebuję tego również od React Native, a dzięki temu tutaj możemy utworzyć komponent wejściowy, który pobiera rekwizyty i
musi zwrócić trochę jsx. Będziemy mieli obiekt stylów z Arkuszem stylów. stworzyć i oczywiście
w końcu eksportujemy to jako domyślny tutaj, ten komponent.
Teraz, jeśli wrócimy do ekranu edycji produktu, możemy wyciąć ten tytułowy kod jsx, więc widok otoczenia, tekst, wprowadzanie tekstu i
ta część komunikatu o błędzie, wyciąć go stąd, z ekranu
edycji produktu i przenieść na ekranie wejściowym i użyj go jako wartości zwracanej w tym komponencie wejściowym.
Teraz oczywiście musimy trochę to zmienić, ale to jest nasz ogólny szkielet, którego chcę tam
użyć.
Teraz również z ekranu edycji produktu, wezmę styl,
tam ta etykieta kontrolna formularza i styl wejściowy mogą zostać usunięte i
powinny zostać przeniesione do komponentu wejściowego i tam do arkusza stylów.
Teraz, oczywiście, można tego użyć tylko w tytule i chcę utworzyć komponent wejściowy, który
można wykorzystać do dowolnego wprowadzania, co oznacza na przykład, że etykieta tutaj musi być dynamiczna, więc spodziewam się
weź to na rekwizycie o nazwie label.
Ogólnie rzecz biorąc, chcę również upewnić się, że wprowadzanie tekstu można skonfigurować z
zewnątrz, więc przekażę wszystkie rekwizyty, które dostaję na moim komponencie wejściowym tutaj, do wprowadzania tekstu, dzięki czemu na tym komponencie będziemy
mogli ustawić rzeczy takie jak typ klawiatury, ponieważ nie chcę tutaj tego kodować na sztywno,
zamiast
tego powinno to być opakowanie wielokrotnego użytku wokół komponentu wprowadzania tekstu, który można skonfigurować
z zewnątrz.
Więc te ustawienia tutaj, na przykład, wytnę je stąd, abyśmy mogli je ustawić z zewnątrz, pozbędę się również tych
słuchaczy, ponieważ tak naprawdę ich nie potrzebujemy.
Tekst błędu również powinien być ustawiany z zewnątrz, więc sprawdzę tekst błędu rekwizytów
tutaj i oczywiście możesz
jak zwykle nadać tym rekwizytom dowolne nazwy, oczywiście będziemy musieli
zmienić to, co tutaj przypisujemy jako wartość i tak dalej, to również
się zmieni.
Ale teraz możemy już zacząć używać
tego wejścia tutaj, przejdźmy do ekranu edycji produktu i tam, po prostu przejdę na górę i zaimportuję dane wejściowe z folderu składników oczywiście i tam z folderu interfejsu
użytkownika i tam z danych wejściowych, a następnie mogę zacząć
korzystać z komponentu wejściowego w miejscu, w którym wcześniej miałem tutaj komponent do
wprowadzania tekstu.
Więc dodam tylko dane wejściowe, a teraz na wejściu możemy dodać ustawienie, które wyciąłem, takie jak typ klawiatury i
tak dalej, ponieważ zostanie ono przekazane.
Możemy ustawić naszą etykietę tytułu, na przykład tytuł, a także ewentualny tekst błędu, na przykład Wprowadź prawidłowy tytuł, choć to nie wszystko,
co zrobimy w zakresie sprawdzania poprawności, ale to dopiero początek.
W ten sposób możemy następnie wykorzystać te
dane wejściowe i oczywiście w ten sposób możemy je teraz wykorzystać do zastąpienia innych danych wejściowych.
Na przykład tutaj, imageUrl, tutaj ustawiam to na imageUrl, proszę wprowadzić poprawny imageUrl może, domyślnie typ klawiatury
jest w porządku, automatyczna korekta wielkich liter nie jest wymagana, zwróć typ klucza,
możemy to zostawić, nie robimy cokolwiek z tym możemy dodać trochę
logiki, ale nie robię tego tutaj. Jeśli chodzi o cenę, pozostawię renderowanie warunkowe, ale tam
mogę dodać moje dane wejściowe, ustawić tę wartość na cenę, wprowadź prawidłową cenę, typ klawiatury tutaj nie powinien oczywiście być domyślny, ale pad dziesiętny, nie potrzebuję
automatycznych wielkich liter lub automatyczna korekta, więc pozbądźmy się tego. I do opisu tutaj, dodam również
moje dane wejściowe tutaj, opis, proszę wprowadzić poprawny opis, typ klawiatury może być domyślny, mogę użyć automatycznej
wielkich liter, automatycznej korekty, jednak nie ustawię typu klawisza powrotu, ale
tutaj Chcę ustawić multilinię właśnie tak, co pozwala na edycję wieloliniową i ustawić liczbę wierszy,
powiedzmy trzy.
Jest to jednak używane tylko przez Androida, ale tam ograniczy liczbę linii, które możesz wprowadzić, w
iOS, to nie będzie miało efektu, ale w ten sposób możesz teraz używać tego komponentu wejściowego i
nadal konfigurować go z zewnątrz.
Biorąc to pod uwagę, ponieważ powiedziałem,
że jeszcze nie skończyliśmy, co z wartością i tą zmianą detektora tekstu?
Istnieją różne sposoby obsługi tego wprowadzania tekstu lub wartości tekstowych tutaj.
Nadal możesz po prostu przesłać go do komponentu nadrzędnego i używać tego komponentu wejściowego tylko jako
opakowania wizualnego,
ale przejdę go nieco dalej i chcę zarządzać tą wartością i ważnością pojedynczego wejścia w komponencie wejściowym, tak
aby Następnie zgłaszam się tylko do
mojego komponentu nadrzędnego, więc na końcu ekranu edycji produktu, jaka jest bieżąca wartość i czy jest poprawna, czy nie,
aby sprawdzanie poprawności nie musiało się odbywać
w komponencie nadrzędnym, ale znowu, to jest całkowicie w górę do
ciebie, czy chcesz to zrobić, czy nie. Tutaj dodam nową stałą do
komponentu wejściowego, moduł obsługi zmiany tekstu, w którym dostaję ten tekst, ponieważ to teraz wiążę lub
co jest już związane i ogólnie zachowam to w ten sposób, chociaż
tutaj nie potrzebujemy identyfikatora
nie trzeba już wiązać, ponieważ jest to wewnątrz jednego wejścia, nie potrzebujemy
tam identyfikatora.
To będzie teraz wyzwalane przy każdym naciśnięciu klawisza, a
więc teraz tutaj chcę sprawdzić, czy jest to prawidłowe, czy nie, a także zarządzać moją wartością tego wejścia. Teraz możemy ponownie użyć reduktora lub pojedynczych stanów zarządzanych za pomocą stanu
użytkowania lub utworzonych za pomocą stanu użytkowania, ale pójdę po reduktor i
tutaj mam mój
reduktor wejściowy, nazwa zależy od ciebie, dostaje stan, dostaje stan akcja i zwraca nowy stan na
końcu.
Następnie tutaj, na wejściu, mogę wywołać use reduktor i przesłać dalej lub ustawić to na reduktor wejściowy, a moim początkowym
stanem dla tego wejścia będzie prosty obiekt JavaScript z trzema wartościami. Wartość, którą obecnie posiadasz, która początkowo może być pusta,
ale tak naprawdę chcę pozwolić sobie na ustawienie wartości początkowej z zewnątrz, ponieważ będziemy
jej potrzebować, na przykład podczas edycji
produktów, więc sprawdzam, czy wartość początkowa rekwizytów jest ustawiona ,
znowu jest to oczywiście nazwa,
którą możesz wybrać, jak chcesz, a jeśli
tak jest, ustawię ją na
wartość
początkową rekwizyty, w przeciwnym razie ustawię, aby ustawić
ją na pusty ciąg, to też zarządzę czy jest to poprawne czy nie, i tam ponownie mogę sprawdzić, czy rekwizyty początkowo ważne, powiedzmy,
że jest ustawiony.
W takim przypadku automatycznie przyjmuję tę wartość, która powinna być
prawdziwa lub fałszywa, jeśli tak nie
jest, to automatycznie zostanie potraktowana jako fałszywa, a
także zarządzę, czy została jeszcze dotknięta, czy nie, więc czy użytkownik faktycznie napisał tutaj i może to
być przydatne, aby pomóc nam w zapewnieniu lepszej wygody
użytkownika, jeśli chodzi o to, kiedy wyświetlamy błędy sprawdzania poprawności, a tutaj na początku ustawię wartość false.
Teraz oczywiście zwróci nam migawkę stanu wejściowego i funkcję wysyłania, którą tutaj mogę
również nazwać wysyłką, ponieważ nie będziemy mieć konfliktu nazw, a w module obsługi
zmiany tekstu oczywiście wyślę akcję, akcję, którą dlatego utworzymy tutaj z identyfikatorem akcji, na przykład
zmianę danych wejściowych, które należy wysłać tutaj, wpisz zmianę danych wejściowych,
a następnie tutaj w reduktorze możemy dodać instrukcję switch, aby pomieszać rzeczy, sprawdzić typ akcji i zmianę danych
wejściowych sprawy , chcemy coś zrobić. W domyślnym przypadku po prostu przywrócę
swój stan, więc nie zrobię nic, ale tutaj oczywiście chcę zrobić coś innego.
Teraz tutaj, w procedurze zmiany tekstu, oczywiście wysyłam zmianę danych wejściowych i chcę przekazać wartość,
którą zapamiętałem w kluczu
wartości, ale teraz tutaj chcę również dokonać weryfikacji specyficznej dla danych wejściowych i przekazać informację, czy dane
wejściowe są prawidłowe, czy nie . W tym celu w
załączeniu znajduje się konfiguracja sprawdzania poprawności lub kod weryfikacyjny, przez który teraz przeprowadzę.
Tutaj mam stałą, która konfiguruje wyrażenie regularne wiadomości e-mail, więc wyrażenie regularne, które pozwala nam
zweryfikować adresy e-mail, nie
mamy jeszcze adresu e-mail, ale później, gdy dodamy uwierzytelnienie, będziemy to mieć, a potem będę
mógł aby użyć tego komponentu wejściowego, dlatego
ten komponent powinien być przygotowany do sprawdzania poprawności wiadomości e-mail.
Mam tutaj poprawną zmienną pomocniczą, ponieważ mamy tutaj kilka sprawdzeń.
Teraz chcę się upewnić, że możemy ustawić kryteria, które chcemy zastosować z zewnątrz za pomocą rekwizytów, więc na przykład sprawdzam, czy wymagane
rekwizyty są ustawione, jeśli jest to ustawione na true, więc jeśli w ogóle jest ustawione
i czy w takim przypadku ta kontrola zostanie wykonana. Jeśli wymagany rekwizyt nie jest ustawiony, to sprawdzenie
nie zostanie przeprowadzone, a zatem ta weryfikacja nie zostanie wykonana i tak jest w
przypadku wszystkich moich różnych weryfikacji tutaj.
Możemy więc ustawić wymagany rekwizyt, aby sprawdzić, czy nie jest pusty, jeśli jest pusty, ustawiliśmy wartość false.
Możemy ustawić prop e-maila na elemencie wejściowym, aby zweryfikować, czy jest prawidłowym adresem e-mail, a jeśli
nie, ustawimy go na false.
Możemy sprawdzić liczbę za zbyt małą lub zbyt dużą lub ciąg znaków za zbyt krótki za
pomocą
walidatora minimalnej długości i oczywiście możesz dodać tutaj więcej logiki, być może również z
pakietem takim jak ValidateJs, o którym już wspomniałem wcześniej. Teraz z tym będę mieć poprawność na końcu, co jest prawdą domyślnie,
ale fałszem, gdy tylko jedna walidacja zakończy się niepowodzeniem, a zatem teraz możemy dodać, że jest ważna również dla tej wysłanej
akcji.