Jetzt werde ich sagen, dass wir uns im nächsten Kursmodul in einem separaten Modul eingehend
mit der Arbeit mit Benutzereingaben usw. befassen werden, daher werde ich jetzt nicht weiter darauf eingehen.
Das einzige, was ich jetzt tun möchte, ist, hier eine Texteingabe zum Bildschirm zum Bearbeiten
von Produkten hinzuzufügen und dann hier einige Texteingaben auszugeben, mit denen wir Benutzereingaben abrufen und am
Ende Produkte ohne hinzufügen oder bearbeiten können Validierung oder irgendetwas Besonderes drin.
Daher importiere ich auch eine Bildlaufansicht, da ich zunächst alles mit einer Bildlaufansicht umschließe, da
Sie dies sicherlich auf einem kleinen Gerät oder im Querformat anzeigen
können, wo nicht alles auf einen Bildschirm passt. Jetzt haben wir ein paar Ansichten mit den verschiedenen Texteingaben, also haben wir hier
immer einen Text mit einer Bezeichnung, wie dem Titel des Produkts, das Sie eingeben sollten, und darunter eine Texteingabe,
die dies ermöglicht Wenn Sie diesen Titel eingeben, werde ich dies am Ende für all die verschiedenen Dinge wiederholen, die Sie
hinzufügen möchten.
Jetzt ist
ein gewisses Styling erforderlich. Für die Texteingabe füge ich hier einen Eingabestil hinzu.
Über dem Text darüber füge ich eine Stilstilbezeichnung hinzu.
Sie können dieser Ansicht auch einen allgemeinen Formstil geben Steuern Sie zum Beispiel, was auch
immer Sie es benennen möchten, und jetzt können wir das für den Titel, für die imageUrl hier, für den
Preis und nicht zuletzt für die Beschreibung wiederholen. Ich werde diese Dinge auch insgesamt in eine andere
Ansicht einbinden, also all diese Formularsteuerelemente am Ende, die ich einem Stil von Stilen geben werde.
Jetzt ist es an der Zeit, hier an
diesen Stilen zu arbeiten. Dort unten im Stylesheet werde ich für das Formular einen Rand von 20 in alle Richtungen festlegen,
sodass um diese Eingaben herum ein gewisser Abstand besteht. Für meine Eingaben hier, für die Beschriftung und
Eingabe des Formularsteuerelements möchte ich auch einige Stile hinzufügen, daher habe ich hier das Formularsteuerelement, meine Beschriftung und dann auch die Eingabe selbst, also die
Texteingabe selbst und für das Formularsteuerelement Ich möchte eine Breite von 100 einstellen, um sicherzustellen, dass diese
so breit wie möglich ist. Für die Beschriftung setze
ich die Schriftfamilie so, dass sie ohne Fettdruck geöffnet wird, um hier fett gedruckten Text zu erhalten,
und dann einen vertikalen Rand von 8, um oben und unten einen gewissen Abstand zu
haben, und für die Eingabe selbst,
bei der es sich um dieses Texteingabeelement handelt, möchte ich Um einen horizontalen Abstand von zwei zu
haben, also einen sehr kleinen Abstand, damit wir uns bei der Eingabe von Text nicht direkt am Rand der Eingabe
befinden, und einen vertikalen Abstand von 5, also einen kleinen Abstand oben und unten und einen Rand unten Farbe dieses leicht grauen Aussehens mit diesem Hex-Code von ccc und dann einer Randunterbreite von
eins und das ist der Stil, mit dem ich jetzt gehen werde. Wenn wir uns das ansehen, indem wir zum Administrator gehen und dann zum Beispiel ein
neues hinzufügen, sieht es so aus, es sieht nicht schlecht aus, sicherlich
nicht in irgendeiner Weise konfiguriert, aber einige, mit denen man anfangen kann und
natürlich Jetzt möchte ich dies einreichen und auch speichern können.
Dafür möchte ich auf
dem Bildschirm zum Bearbeiten des Produkts eine Aktionsschaltfläche haben, also eine Schaltfläche in der Kopfzeile. Daher spielt hier vor den Stilen möglicherweise die Reihenfolge keine Rolle, aber
ich möchte sie direkt neben der Komponente haben Fügen Sie die Navigationsoptionen hinzu, bei denen ich diese dynamische Syntax
benötige, da wir etwas Dynamisches aus dem Header heraus ausführen müssen. Dann geben wir hier das Konfigurationsobjekt zurück,
bei dem Sie zum einen den Headertitel festlegen können und der auch dynamisch sein sollte, weil
dort Ich möchte ausgeben, ob wir bearbeiten oder hinzufügen. Dies hängt davon ab, ob wir einen Produkt-ID-Parameter haben oder
nicht, damit wir bereits auf navData zugreifen können. Navigation. getParam.
Wenn Sie sich jetzt den Benutzerproduktbildschirm ansehen, werden Sie feststellen, dass wir beim Klicken
auf die Schaltfläche Bearbeiten den Produkt-ID-Parameter hier übergeben, um die Produktnavigation zu bearbeiten. Wenn wir jedoch auf das Symbol Hinzufügen in der Kopfzeile geklickt haben
Das
geben wir nicht weiter.
Wenn der Produkt-ID-Parameter verfügbar ist, wissen wir, dass wir uns im Bearbeitungsmodus befinden.
Hier kann ich also überprüfen, ob wir einen Wert dafür erhalten können, und wenn dies wahr ist, dann
zeige ich das Bearbeitungsprodukt als Titel an,
andernfalls zeige ich das Hinzufügen eines Produkts an, da dies für mich ein klarer Indikator ist, ob wir bearbeiten oder Hinzufügen.
Der Header-Titel ist jedoch nicht alles, was Teil der
Konfiguration sein sollte. Ich
möchte auch, dass dieser Header-rechte Teil eine Schaltfläche enthält, mit der ich meine Daten
speichern kann. Dazu gehe ich zum Bildschirm für Benutzerprodukte und kopiere ihn
Dieses Setup habe ich dort mit den Header-Buttons, kopiere das in den Editier-Produktbildschirm und kopiere daher natürlich auch
die Importe von Header-Button und Header-Buttons und Item-Over, um den Produktbildschirm zu bearbeiten und füge dies hier und jetzt natürlich hinzu Ich muss dies
ein wenig optimieren, da hier sicherlich eine Schaltfläche zum Hinzufügen keinen Sinn ergibt.
Speichern scheint eine passendere Bezeichnung zu sein, und das Symbol, das ich verwenden möchte, ist md Häkchen und
iOS Häkchen, das ein schönes Häkchensymbol darstellt. Natürlich möchte ich hier auch nicht navigieren, um
das Produkt zu bearbeiten, sondern ich möchte mein Formular einreichen und daran werden wir gleich arbeiten.
Zunächst müssen wir sicherstellen, dass wir alle Benutzereingaben speichern können und dass
wir dieses Formular auch vorab ausfüllen, falls wir es bearbeiten. Um die Benutzereingaben zu speichern, können wir den Use-State-Hook von React verwenden
und einfach den Status für jede dieser Texteingaben
verwalten. Daher haben wir hier am Ende vier Status mit dem
Use-Status, die jeweils zunächst mit einer leeren Zeichenfolge initialisiert wurden und dann haben wir den Titel und setzen
den Titel und wiederholen das im Grunde, um auch wie imageUrl und set imageUrl zu haben und dann hier den Preis und
den eingestellten
Preis und dann hier auch die Beschreibung und die eingestellte Beschreibung und wieder werden wir dies verfeinern Im nächsten Modul
werden wir uns eingehender mit Benutzereingaben befassen.
Im Moment binde ich dies nur an meine Texteingabe. Der Wert hier ist an den Titel für diese erste
Eingabe gebunden, die meine Titeleingabe ist. Wenn Sie hier den Text ändern, wird mein Text hier geändert und ich speichere ihn wieder unter Stellen Sie hier in diesem Fall den
Titel ein, damit ich meinen Titelstatus mit dem neu eingegebenen Titeltext aktualisiere. Und jetzt ist es dieses Muster, das wir
hier zu all diesen Texteingaben hinzufügen. Hier
sprechen wir natürlich für das zweite über imageUrl und setzen imageUrl, aber ansonsten ist
es dasselbe. Für den Preis ist
es nicht überraschend, dass wir den Preis zurückgeben und den festgelegten Preis nennen, aber ansonsten ist es der gleiche.
Bitte beachten Sie, dass der Preis daher hier natürlich auch als Zeichenfolge
verwaltet wird, da alles, was der Benutzer eingibt, immer Text ist. Hier für die Texteingabe werde ich meine Beschreibung übergeben und meine Beschreibung hier
festlegen.
Damit werden die Daten verwaltet, um vorab auszufüllen, dass wir, wenn wir ein Rezept haben, wenn wir ein Produkt laden
und uns im Bearbeitungsmodus befinden, nur unsere Produkt-ID mit Hilfe der Requisitennavigation abrufen müssen Die Produkt-ID ist ein Parameter, den
wir beim Abrufen korrigieren können. Wenn die Produkt-ID festgelegt ist, weiß ich, dass wir uns im Bearbeitungsmodus befinden,
und dann möchte ich natürlich meine Felder hier mit den Werten vorab ausfüllen.
Das bedeutet, dass ich mein Produkt basierend auf der Produkt-ID aus meinem Redux-Status laden möchte.
Also importieren wir hier und jetzt den Use Selector von React Redux. Wir können unser bearbeitetes Produkt erhalten, indem wir mit dem Use Selector auf unseren Redux-Status zugreifen. Jetzt müssen wir natürlich in unser Produkt-Slice
eintauchen und Sie können jederzeit Ihren überprüfen Reduzierer
Wenn Sie sich nicht sicher sind, wie es wieder aufgebaut wurde, sehen
wir im Produktteil unseres Reduzierers, unseres Redux-Shops, dass wir am Ende dieses
Benutzerprodukt-Array haben. Das interessiert mich also Hier erreiche ich Benutzerprodukte
und möchte jetzt
das Produkt mit dieser Produkt-ID finden. Hier werde ich mir jedes Produkt ansehen.
Die Suchfunktion erledigt dies für mich und ich möchte true zurückgeben, wenn die ID
des Produkts, das ich betrachte, der Produkt-ID entspricht, die ich aus meinen Parametern abgerufen habe.
Jetzt ergibt dies natürlich manchmal nichts, wenn die Produkt-ID nicht festgelegt ist, da dieser Parameter
nicht festgelegt ist, was immer der Fall ist, wenn wir auf diese Schaltfläche zum Hinzufügen geklickt haben. Dann wird dieser
Parameter nie festgelegt, aber das ist in Ordnung. Das bearbeitete Produkt ist dann einfach undefiniert, was völlig in Ordnung ist. Andernfalls wissen wir, dass wir
uns im Bearbeitungsmodus befinden, wenn das bearbeitete Produkt nicht undefiniert ist. Wenn es
daher festgelegt ist, können wir unsere Werte vorab ausfüllen. Daher werde ich dies zuerst tun, bevor ich meinen Status initialisiere, da
dies etwas ist, das ich initialisieren möchte, je nachdem, ob wir ein Produkt geladen haben oder nicht.
Also den Titel hier, eigentlich dort werde ich prüfen, ob das bearbeitete Produkt gesetzt ist, wenn das gesetzt ist, wenn es
gesetzt ist, dann werde ich den zu bearbeitenden Titel initialisierenProdukt. Titel, sonst ist es eine
leere Zeichenfolge und ich habe hier die gleiche Logik für die imageUrl.
Also hier mache ich das für imageUrl, nicht für den Preis, weil der Preis nicht änderbar sein sollte, aber ich werde
es für die Beschreibung tun.
Der Standardwert für Titel, imageUrl und Beschreibung hängt also davon ab,
ob wir ein bearbeitetes Produkt haben oder nicht. Und jetzt, da wir dies auf den Status setzen, wird
dies automatisch in unsere Texteingaben eingespeist und das einzige ist, dass ich sicherstellen muss, dass
ich die Preiseingabe hier entferne, wenn wir uns im Bearbeitungsmodus befinden. Ich werde also prüfen, ob das bearbeitete Produkt hier eingestellt ist. Wenn
dies der Fall ist, gebe ich
hier null zurück und
nur dann, wenn es nicht festgelegt ist. Wenn ich mich also im Add-Modus und nicht im Bearbeitungsmodus befinde, werde ich das rendern Preiseingabe hier,
so dass die Preiseingabe entfernt wird, wenn wir bearbeiten, weil ich sie sowieso nicht bearbeiten kann.
Probieren wir es jetzt aus und kehren wir zum Admin-Bildschirm zurück. Wenn ich auf Hinzufügen klicke, muss ich den Plattformimport
erneut hinzufügen, da ich diesen in der Kopfzeile zum Rendern des Häkchens verwende. Die
Symbole hängen von der Plattform ab.
Stellen wir also sicher, dass wir die Plattform auf dem Bildschirm zum Bearbeiten von Produkten importieren. Wenn ich jetzt auf Hinzufügen klicke,
werden alle vier Importe angezeigt, die zu Beginn alle leer sind. Wenn ich andererseits auf Bearbeiten klicke, werden sie vorab ausgefüllt
und ich sehe nicht die Preiseingabe, die genau das ist, was ich will.
Jetzt ist es an der Zeit sicherzustellen, dass wir bei der Übermittlung entweder unser
Produkt aktualisieren, wenn wir es bearbeiten, oder wenn wir es hinzufügen, ein neues Produkt hinzufügen.
Jetzt noch einmal, für den Moment werde ich keine Validierung hinzufügen, wir werden das später tun.
So können wir vorerst auch ein leeres Produkt einreichen, später nach dem nächsten Modul wird
dies nicht mehr möglich sein.