Wie können wir das sonst noch optimieren?
Nun, Sie werden vielleicht bemerken, dass dieser jsx-Code hier am Ende immer wieder wiederholt werden kann, jede Eingabe
sieht so aus.
Wir haben eine Ansicht, wir haben eine Beschriftung mit der Texteingabe selbst und wir möchten möglicherweise auch einen Fehlertext, den
wir anzeigen können.
Es wäre also sinnvoll, dies in eine separate Komponente auszulagern,
und genau das möchte ich tun.
Ich gehe zu meinem Komponentenordner und füge dort im UI-Ordner eine Eingabe hinzu. js-Datei, die eine React-Komponente enthält, also importiere ich
natürlich React from React und importiere dann ein paar Dinge aus React Native.
Diese Dinge sind am Ende meine Ansicht, die Textkomponente, die Texteingabekomponente und das Stylesheet, weil ich
' Ich brauche dies auch von React Native und damit können wir hier die Eingabekomponente erstellen, die Requisiten erhält und
etwas jsx zurückgeben muss. Wir haben ein Styles-Objekt mit Stylesheet. erstellen und natürlich
exportieren wir dies als Standard hier, diese Komponente.
Wenn wir nun zum Bildschirm zum Bearbeiten des Produkts zurückkehren, können wir diesen Titel-jsx-Code ausschneiden, sodass die umgebende Ansicht, der Text, die Texteingabe und
dieser Teil der Fehlermeldung ihn hier aus dem Bildschirm zum Bearbeiten des
Produkts herausschneiden und verschieben das in den Eingabebildschirm und dort, verwenden Sie es als Rückgabewert in der Eingabekomponente hier.
Jetzt müssen wir das natürlich ein wenig anpassen, aber das ist unser allgemeines Skelett, das ich dort verwenden
möchte.
Jetzt übernehme ich auch vom Bildschirm zum Bearbeiten
des Produkts das Styling. Dort können diese Formularsteuerungsbezeichnung und das Eingabestyling entfernt werden
und sollten in die Eingabekomponente und dort in das Stylesheet verschoben werden.
Damit kann dies natürlich nur für einen Titel verwendet werden, und ich möchte eine Eingabekomponente erstellen,
die für jede Eingabe verwendet werden kann. Dies bedeutet beispielsweise, dass die Beschriftung hier dynamisch sein muss, also erwarte ich dies Holen
Sie sich dies auf einer Requisite namens Label vielleicht.
Ich möchte im Allgemeinen auch sicherstellen, dass die Texteingabe von außen konfiguriert
werden kann, daher leite ich alle Requisiten, die ich hier auf meiner Eingabekomponente erhalte, an die Texteingabe weiter, damit wir
diese Eingabekomponente festlegen können Dinge wie der Tastaturtyp, weil ich dies hier nicht fest
codieren
möchte, sondern ein wiederverwendbarer Wrapper um die Texteingabekomponente sein sollte, der von außen konfiguriert
werden kann.
Also diese Einstellungen hier zum Beispiel, ich werde sie von hier aus schneiden, damit wir sie von außen einstellen können. Ich werde diese
Hörer auch loswerden, weil wir sie nicht wirklich brauchen.
Der Fehlertext hier sollte auch von außen einstellbar sein, daher werde ich hier nach Requisiten-Fehlertext
suchen und natürlich können
Sie diesen Requisiten wie immer beliebige Namen geben. Natürlich müssen wir
auch ändern, was wir hier als zuweisen Wert und so weiter, das wird
sich auch ändern.
Aber jetzt können wir diese Eingabe
bereits hier verwenden. Gehen wir zum Bildschirm zum Bearbeiten des Produkts und dort gehe ich einfach nach oben und importiere natürlich Eingaben aus dem Komponentenordner und dort aus dem
UI-Ordner und dort aus der Eingabe und dann wir Ich
kann die Eingabekomponente an der Stelle verwenden, an der ich zuvor meine Texteingabekomponente
hier hatte.
Dort füge ich nur die Eingabe hinzu und jetzt können wir bei der Eingabe die Einstellung hinzufügen, die ich geschnitten habe, wie den
Tastaturtyp und so weiter, da diese weitergeleitet wird.
Wir können unsere Titelbezeichnung wie Titel und auch unseren möglichen Fehlertext wie Bitte geben Sie einen gültigen Titel ein, obwohl dies nicht alles ist, was wir
in Bezug auf die Validierung tun werden, aber es ist ein Anfang.
Auf diese Weise können wir diesen Eingang
dann verwenden, und natürlich können wir ihn jetzt auch verwenden, um die anderen Eingänge zu ersetzen.
Zum Beispiel hier, die imageUrl, hier setze ich dies auf imageUrl. Bitte geben Sie eine gültige imageUrl ein.
Der Standardtyp für die Tastatur ist in Ordnung. Die automatische Korrektur der automatischen
Großschreibung ist nicht erforderlich irgendetwas damit, wir könnten etwas Logik hinzufügen,
aber ich mache es hier nicht. Für den Preis lasse ich das bedingte Rendering, aber dort
kann ich meine Eingabe hier hinzufügen, diesen auf Preis setzen, bitte geben Sie einen gültigen Preis ein. Der Tastaturtyp sollte hier natürlich nicht Standard sein, sondern ein Dezimalblock,
keine automatische Großschreibung erforderlich oder Autokorrektur, also lassen Sie uns das loswerden. Und für die Beschreibung hier werde ich
auch meine Eingabe hier hinzufügen, Beschreibung, bitte geben Sie eine gültige Beschreibung ein, Tastaturtyp kann Standard sein, ich kann
automatische Großschreibung verwenden, automatische Korrektur, aber ich werde keinen Rückgabetastentyp festlegen, sondern hier
Ich möchte mehrzeilig wie folgt einstellen, was eine mehrzeilige Bearbeitung ermöglicht und die Anzahl der Zeilen auf
drei festlegt.
Dies wird jedoch nur von Android verwendet, aber dort wird die Anzahl der Zeilen, die Sie
eingeben können, eingeschränkt. Unter iOS hat dies keine Auswirkungen. Auf diese Weise können Sie diese Eingabekomponente jetzt verwenden
und sie dennoch von außen konfigurieren.
Davon abgesehen, wie gesagt, wir
sind noch nicht fertig, was ist mit dem Wert und diesem Änderungs-Text-Listener?
Es gibt verschiedene Möglichkeiten, wie Sie mit dieser Texteingabe oder den Textwerten hier umgehen können.
Sie können es trotzdem einfach an die übergeordnete Komponente weiterleiten und diese Eingabekomponente nur als visuellen Wrapper verwenden,
aber ich
werde noch etwas weiter gehen und diesen Wert und die Gültigkeit dieser einzelnen Eingabe innerhalb der Eingabekomponente verwalten, damit Ich
melde mich dann nur bei meiner
übergeordneten Komponente, also am Ende im Bildschirm zum Bearbeiten des Produkts, wie hoch der aktuelle Wert ist und ob er gültig
ist oder nicht, damit die Validierung nicht innerhalb
der übergeordneten Komponente erfolgen muss, aber das ist wieder völlig erledigt für
Sie, ob Sie das tun wollen oder nicht. Hier werde ich eine neue Konstante
in die Eingabekomponente, den Textänderungs-Handler, einfügen, in der ich diesen Eingabetext erhalte, da ich das jetzt binde oder
bereits gebunden bin und es im Allgemeinen so behalte, obwohl wir den Bezeichner
hier nicht benötigen Sie
müssen nicht mehr binden, da dies innerhalb einer einzelnen Eingabe liegt. Wir benötigen dort
keine Kennung.
Dies wird nun bei jedem Tastendruck ausgelöst und daher
möchte ich jetzt hier prüfen, ob dies gültig ist oder nicht, und auch meinen Wert dieser Eingabe verwalten. Jetzt können wir wieder einen Reduzierer oder einzelne Zustände verwenden, die mit dem Nutzungsstatus
verwaltet oder mit dem Nutzungsstatus erstellt wurden, aber ich werde mich für einen Reduzierer entscheiden
und hier habe ich
meinen Eingangsreduzierer, der Name liegt bei Ihnen, erhält den Status, erhält einen Aktion und gibt am Ende einen neuen Status
zurück.
Dann kann ich hier in der Eingabe use reducer aufrufen und weiterleiten oder dies auf die Eingangsreduzierung setzen, und mein Anfangszustand
für diese Eingabe hier ist ein einfaches Javascript-Objekt mit drei Werten. Der Wert, den Sie derzeit haben, der anfänglich leer sein
kann, aber eigentlich möchte ich mir erlauben, einen Anfangswert von außen festzulegen, da wir diesen beispielsweise
beim Bearbeiten von Produkten benötigen. Daher überprüfe
ich, ob der Anfangswert der Requisiten festgelegt ist Auch dies ist natürlich
ein Name, den Sie wählen
können, wie Sie möchten, und wenn dies der
Fall ist, setze ich dies auf
den
Anfangswert der Requisiten, andernfalls mache ich mich daran, dies
auf eine leere Zeichenfolge zu setzen, dann werde ich es auch verwalten ob dies gültig ist oder nicht und dort kann ich wieder überprüfen, ob die ursprünglich
gültigen Requisiten gesetzt sind.
Wenn dies der Fall ist, nehme ich automatisch den Wert,
der wahr oder falsch sein sollte. Wenn
dies nicht der Fall ist, wird dies automatisch
als falsch behandelt und ich werde auch verwalten, ob dies noch berührt wurde oder nicht, also ob der Benutzer
habe hier tatsächlich getippt und dies kann hilfreich sein, um
eine bessere Benutzererfahrung hinsichtlich der Anzeige von Validierungsfehlern zu erzielen. Hier werde ich dies zunächst auf false setzen.
Dies gibt uns natürlich den Eingabestatus-Schnappschuss und eine Versandfunktion zurück, die ich hier auch
als Versand bezeichnen kann, da wir keinen Namenskonflikt haben und im Textänderungshandler natürlich eine Aktion
auslösen werde, eine Aktion, die ich daher wird hier mit einer Aktionskennung erstellt, z. B. Eingabeänderung,
die hier versendet werden soll, Eingabeänderung eingeben und dann hier im
Reduzierer eine switch-Anweisung hinzufügen, um die Dinge zu verwechseln, den Aktionstyp zu überprüfen und die Eingabe für den Fall
zu überprüfen , wir wollen etwas tun. Im Standardfall werde ich nur meinen Status
zurückgeben, also werde ich nichts tun, aber hier möchte ich natürlich etwas anderes tun.
Jetzt hier im Textänderungshandler versende ich natürlich die Eingabeänderung und möchte den Wert weiterleiten, den
ich in einem Werteschlüssel
gespeichert habe, aber jetzt möchte ich hier auch eine eingabespezifische Validierung durchführen und die Informationen weiterleiten, ob die
Eingabe gültig ist oder nicht . Und im Anhang finden
Sie ein Validierungssetup oder einen Validierungscode, durch den ich Sie jetzt führen werde.
Hier habe ich eine Konstante, die einen regulären E-Mail-Ausdruck einrichtet. Ein regulärer Ausdruck, mit dem wir E-Mail-Adressen
überprüfen können. Wir haben noch
keine E-Mail-Adresse eingegeben, aber später, wenn wir die Authentifizierung hinzufügen, haben wir diese und dann möchte ich
in der Lage sein Um diese Eingabekomponente
zu verwenden, sollte diese Komponente darauf vorbereitet sein, auch E-Mails zu validieren.
Dann habe ich hier die gültige Hilfsvariable, denn dann haben wir hier eine Reihe von Prüfungen.
Jetzt möchte ich sicherstellen, dass wir die Kriterien, die wir von außen verwenden möchten, mithilfe von Requisiten festlegen können. So überprüfe ich beispielsweise, ob
erforderliche Requisiten festgelegt sind, ob diese auf true festgelegt sind, ob sie überhaupt festgelegt sind und
ob Ist dies der Fall, wird diese Prüfung durchgeführt. Wenn die erforderliche Requisite nicht eingestellt ist, wird
diese Prüfung nicht durchgeführt, und daher wird diese Validierung nicht durchgeführt. Dies gilt für
alle meine verschiedenen Validierungen hier.
Wir können also eine erforderliche Requisite festlegen, um zu überprüfen, ob sie nicht leer ist. Wenn sie leer ist, setzen wir sie auf false.
Wir können eine E-Mail-Requisite für die Eingabekomponente festlegen, um zu überprüfen, ob sie eine gültige E-Mail-Adresse ist. Wenn dies nicht der
Fall ist, setzen wir sie auf false.
Wir können mit dem Min-Längen-Validator eine Zahl auf zu klein oder zu groß oder eine Zeichenfolge
auf
zu kurz prüfen, und natürlich können Sie hier mehr Logik hinzufügen, möglicherweise auch mit
einem Paket wie ValidateJs, das ich bereits erwähnt habe. Damit habe ich am Ende eine Gültigkeit, die standardmäßig wahr, aber
falsch ist, sobald eine Validierung fehlschlägt. Daher können wir jetzt hinzufügen, dass sie auch für diese ausgelöste Aktion gültig
ist.