Teraz powiem, że dogłębnie przyjrzymy się, jak pracować z danymi wejściowymi użytkownika i tak
dalej w osobnym module w następnym module kursu, dlatego nie będę teraz głęboko w niego zagłębiał.
Jedyne, co chcę teraz zrobić, to dodać tutaj tekst na ekranie edycji produktu, a następnie
wypisać tutaj kilka tekstowych danych wejściowych, które pozwalają nam pobrać dane użytkownika, a na koniec pozwolić
nam dodać lub edytować produkt bez żadnego walidacja lub coś tam specjalnego.
Dlatego też zaimportuję widok przewijania, ponieważ zacznę od zawijania wszystkiego widokiem przewijania, ponieważ z
pewnością można go oglądać na małym urządzeniu lub w trybie poziomym,
gdzie nie wszystko mieści się na jednym ekranie. Teraz będziemy mieć kilka widoków z różnymi wejściami tekstu, więc tutaj zawsze
będziemy mieć tekst z etykietą, taką jak tytuł produktu, który powinieneś wprowadzić, a poniżej, tekst,
który pozwala aby wprowadzić ten tytuł, a na koniec powtórzę to dla wszystkich różnych rzeczy, które chcesz
dodać.
Teraz
będzie wymagana stylizacja, więc tutaj do wprowadzania tekstu dodam styl
wprowadzania, a na tekście powyżej dodam etykietę stylu
stylów, możesz również nadać temu widokowi ogólny styl formy kontroluj na
przykład, jakkolwiek chcesz go nazwać, a teraz możemy powtórzyć to dla tytułu, dla imageUrl tutaj,
dla ceny, a także dla opisu. Opiszę te rzeczy ogólnie w innym
widoku, więc na końcu wszystkie te kontrolki formularzy, które nadam stylowi stylu.
Teraz nadszedł czas, aby popracować nad
tymi stylami tutaj, więc tam na dole w arkuszu stylów, dla formy ustawię margines 20 we wszystkich kierunkach,
więc jest trochę odstępów wokół tych danych wejściowych. Do moich danych wejściowych tutaj, do etykiety kontrolki
formularza i danych wejściowych, chcę również dodać kilka stylów, więc tutaj będę mieć kontrolę formularza, moją etykietę, a następnie także dane wejściowe, więc samo
wprowadzanie tekstu i kontrolę formularza , Chcę ustawić szerokość 100, aby upewnić się, że jest ona tak
szeroka, jak to możliwe. W przypadku etykiety
ustawię rodzinę czcionek tak, aby otwierała bez pogrubienia, aby mieć tu trochę pogrubionego tekstu,
a następnie pionowy margines 8, aby mieć odstępy na górze i na dole,
a dla samego wejścia, które
jest tym elementem wprowadzania tekstu, chcę mieć dopełnienie poziome dwa, więc bardzo małe dopełnienie,
tak że kiedy wprowadzamy tekst, nie znajdujemy się bezpośrednio na krawędzi wejścia i dopełnienie pionowe o wartości
5, więc małe dopełnienie do góry i do dołu oraz dolna krawędź kolor tego lekko szarego wyglądu z tym kodem szesnastkowym ccc, a następnie szerokość dolnej krawędzi jednego
z nich, i to jest styl, na który teraz pójdę. Teraz, jeśli przyjrzymy się temu, przechodząc do administratora, a następnie na przykład dodając
nowy, tak to wygląda, nie wygląda to tak źle, na
pewno nie skonfigurowane w żaden sposób, ale niektóre na początek i oczywiście
teraz chcę móc to przesłać i zapisać również.
W tym celu
na ekranie edycji produktu chcę mieć przycisk akcji, więc przycisk w nagłówku, stąd może przed stylami kolejność nie ma znaczenia, ale lubię mieć ją
tuż obok komponentu, dodaj opcje nawigacji, w których potrzebuję tej dynamicznej składni, ponieważ będziemy musieli zrobić coś
dynamicznego z wnętrza nagłówka, a następnie zwrócimy ten obiekt config, w którym na przykład możesz ustawić
tytuł nagłówka, który powinien być również dynamiczny, ponieważ tam , Chcę podać dane wyjściowe niezależnie
od tego, czy edytujemy, czy dodajemy, co będzie zależeć od tego, czy mamy parametr identyfikatora produktu, czy
nie, abyśmy mogli już uzyskać dostęp do navData. nawigacja. getParam.
Teraz, gdy spojrzysz na ekran produktu użytkownika, zauważysz, że kiedy
klikamy przycisk edycji, przekazujemy tutaj parametr identyfikatora produktu, aby edytować nawigację produktu, kiedy kliknęliśmy ikonę dodawania w nagłówku, jednak
, nie przekazujemy tego.
Zatem identyfikator produktu, jeśli jest dostępny, wiemy, że jesteśmy w trybie edycji.
Więc tutaj mogę sprawdzić, czy możemy uzyskać dla tego wartość, a jeśli to prawda,
to pokazuję edycję produktu jako tytuł,
w przeciwnym razie pokażę dodanie produktu, ponieważ jest to dla mnie wyraźny wskaźnik, czy edytujemy, czy dodawanie
Tytuł nagłówka to jednak nie wszystko, co powinno
być częścią konfiguracji,
chcę też mieć tę prawą część nagłówka, aby mieć przycisk, który pozwala mi
zapisać moje dane, w tym celu przejdę do ekranu produktów użytkownika
i skopiuję tę konfigurację mam tam z przyciskami nagłówka, skopiuj to na ekran edycji produktu i oczywiście
skopiuj również import przycisku nagłówka i przycisków nagłówka oraz element do edycji ekranu produktu i dodaj to tu i teraz, oczywiście muszę
to trochę poprawić, ponieważ z pewnością przycisk dodawania nie ma tutaj sensu,
zapisz wydaje się być bardziej odpowiednią etykietą, a ikona, której chcę użyć, to md checkmark i
iOS checkmark, który renderuje ładną ikonę zaznaczenia. Oczywiście tutaj również nie chcę nawigować do
edycji produktu, ale zamiast tego chcę przesłać formularz i nad tym popracujemy za chwilę.
Po pierwsze, musimy upewnić się, że możemy zapisać wszystkie dane wejściowe użytkownika
i że my również wypełniamy ten formularz na wypadek edytowania. Aby więc zapisać dane wprowadzone przez użytkownika, możemy użyć haka stanu
użycia z React i po prostu zarządzać
stanem dla każdego z tych wprowadzania tekstu, dzięki czemu będziemy
mieć tutaj cztery stany ze stanem użycia, każdy początkowo zainicjowany na pusty ciąg a następnie mamy
tytuł i zestaw tytułów i powtórzmy, że w zasadzie mamy również imageUrl i set imageUrl, a następnie tutaj, mamy cenę i
cenę zestawu,
a następnie tutaj mamy opis i opis zestawu i jeszcze raz poprawimy to w następnym module, w którym
głębiej zajmiemy się wprowadzaniem danych przez użytkownika.
Na razie powiążę to z moim wprowadzaniem tekstu, tutaj wartość jest związana z tytułem pierwszego, który
jest moim wprowadzeniem tytułu, a przy zmianie tekstu tutaj otrzymuję tekst, który się zmienił i zapiszę go z powrotem w w tym przypadku ustaw
tytuł, aby zaktualizować stan tytułu o nowo wprowadzony tekst tytułu. A teraz jest to wzorzec, który dodajemy
tutaj do wszystkich tych tekstów, tutaj oczywiście,
po raz drugi, mówimy o imageUrl i ustawiam imageUrl, ale poza tym jest
taki sam. Co do ceny,
co nie jest zaskoczeniem, zwracamy cenę i nazywamy cenę ustaloną, ale poza tym jest taka sama.
Należy pamiętać, że cena oczywiście jest tutaj również zarządzana jako
ciąg znaków, ponieważ wszystko, co użytkownik wprowadza, zawsze jest tekstem, a tutaj do wprowadzania tekstu przekażę swój opis i ustawię tutaj opis.
Dzięki temu dane są zarządzane, aby teraz wstępnie zaliczyć, że kiedy mamy przepis, gdy ładujemy produkt i
jesteśmy w trybie edycji, musimy tylko uzyskać identyfikator produktu za pomocą nawigacji rekwizytów, uzyskać parametry, tam , identyfikator
produktu jest parametrem, który możemy naprawić, a jeśli ustawiony jest identyfikator prod, to wiem, że jesteśmy w
trybie edycji, i wtedy oczywiście chcę wstępnie wypełnić moje pola wartościami.
Teraz właściwie oznacza to, że chcę załadować mój produkt na podstawie identyfikatora prod ze stanu Redux.
Więc importujemy selektor użycia z React Redux tu i teraz tutaj, możemy uzyskać nasz edytowany produkt, docierając z selektorem użycia do naszego stanu Redux i teraz tutaj, oczywiście, musimy zagłębić się w nasz kawałek produktu i
zawsze możesz sprawdzić swój reduktor, jeśli nie jesteś pewien,
jak został on skonstruowany ponownie i tam, widzimy w części produktowej naszego reduktora,
w naszym sklepie Redux, powinienem powiedzieć, że w końcu mamy tablicę produktów
użytkownika, więc to mnie interesuje tutaj sięgam do produktów użytkowników
i teraz chcę
znaleźć produkt o tym identyfikatorze produktu. Więc tutaj przyjrzę się każdemu produktowi,
funkcja find robi to za mnie i chcę zwrócić wartość true, jeśli
identyfikator produktu, na który patrzę, jest równy identyfikatorowi produktu pobranemu z moich parametrów.
Teraz oczywiście czasami to nic nie da, jeśli ID prod nie jest ustawione, ponieważ
ten parametr nie jest ustawiony, co zawsze ma miejsce po kliknięciu tego przycisku dodawania, wtedy ten parametr nigdy nie
zostanie ustawiony, ale to jest w porządku. Tak edytowany produkt będzie po prostu niezdefiniowany, co jest całkowicie w porządku. W przeciwnym razie, jeśli edytowany
produkt nie jest niezdefiniowany, jeśli zostanie ustawiony, wiemy, że jesteśmy w trybie
edycji i dlatego możemy wstępnie wypełnić nasze wartości. Dlatego faktycznie zrobię to najpierw, zanim zainicjuję mój stan, ponieważ jest
to coś, co chcę zainicjować w zależności od tego, czy załadowaliśmy produkt, czy nie.
Więc tytuł tutaj, właściwie tam sprawdzę, czy edytowany produkt, jeśli jest ustawiony, jeśli jest ustawiony,
to zainicjuję tytuł, który ma być edytowany. tytuł, w przeciwnym razie będzie
to pusty ciąg i będę miał taką samą logikę dla imageUrl tutaj.
Więc tutaj robię to dla imageUrl, nie dla ceny, ponieważ cena nie powinna być zmienna, ale
zrobię to dla opisu.
Tak więc domyślna wartość tytułu, imageUrl i opisu zależy od
tego, czy mamy edytowany produkt, czy nie. A teraz, skoro ustawiliśmy to na stan, zostanie to
automatycznie wprowadzone do naszych danych wejściowych, a jedyną rzeczą jest to, że muszę upewnić
się, że usunę tutaj cenę wejściową, jeśli jesteśmy w trybie edycji. Więc sprawdzę, czy edytowany produkt jest ustawiony tutaj i jeśli tak
jest, wtedy zwrócę tutaj wartość
null i tylko w
przeciwnym razie, jeśli nie zostanie ustawiony, więc jeśli jestem w trybie dodawania, a nie w trybie edycji, wyrenderuję to cena wejściowa tutaj, tak
że cena wejściowa jest usuwana, jeśli edytujemy, ponieważ i tak nie mogę jej edytować.
A teraz spróbujmy i wróćmy do ekranu administratora. Jeśli kliknę przycisk Dodaj, tak, muszę ponownie dodać
import platformy, ponieważ używam tego w przycisku nagłówka do renderowania znacznika
wyboru, ikony zależą od platformy.
Upewnijmy się więc, że importujemy platformę na ekranie edycji produktu, ale teraz, gdy kliknę Dodaj,
zobaczymy wszystkie cztery importy, wszystkie puste na początku. Z drugiej strony, jeśli kliknę edycję, zostaną one wypełnione
i nie widzę danych wejściowych ceny, które są dokładnie tym, czego chcę.
Teraz nadszedł czas, aby upewnić się, że przesyłając to, albo
aktualizujemy nasz produkt, jeśli edytujemy, albo jeśli dodajemy go, dodajemy nowy produkt.
Jeszcze raz, na razie nie dodam żadnej weryfikacji, zrobimy to później.
Na razie możemy również przesłać pusty produkt, później po kolejnym module nie
będzie to już możliwe.