Lassen Sie uns also weiter daran arbeiten und dies in eine Funktion zum Ändern des Textänderungshandlers
ändern, die wir
jetzt onChange-Text hier im Titel zugewiesen haben, die wir aber auch zu unserer imageUrl hinzufügen können.
Hier für onChange-Text habe ich dies auch auf Textänderungs-Handler gesetzt. Damit dies funktioniert, müssen wir sicherstellen,
dass diese Funktion Informationen darüber erhält, für welche Eingabe sie ausgelöst wurde, unabhängig davon,
ob Sie gerade den Titel oder den eingegeben haben imageUrl-Eingabe.
Abgesehen davon, dass ich den Text erhalte, erwarte ich auch ein anderes
Argument. Ich erwarte, dass ich meine Eingabekennung oder ähnliches erhalte. Sie können ihn beliebig benennen, damit diese
Funktion für mehrere Texteingaben wiederverwendet werden kann und wir weiterhin Informationen erhalten Über welche Eingabe dies
ausgelöst wurde,
damit wir dies an unseren Reduzierer weiterleiten können, wo wir diese Informationen später benötigen, um unseren
Status korrekt zu aktualisieren.
Um diese Eingabe-ID-Funktionalität zu erhalten, müssen wir zu den Stellen gehen, an denen wir den Textänderungs-Handler verwenden,
und dort können wir beispielsweise Binden oder eine umschließende anonyme Pfeilfunktion verwenden, um diese zu binden, wo es mir egal ist, aber
mehr Um die Argumente zu konfigurieren, die diese Funktion erhält, ist es wichtig, dass es
ein spezielles Argument gibt, das ich übergeben möchte, und das ist die Eingabe-ID.
Und für diese Funktion hier, für diesen Funktionsaufruf
bei dieser Texteingabe, wäre dies natürlich Titel. Für diese Eingabe dort unten hätten wir diese imageUrl gebunden, und
dies sollte wiederum eine Kennung sein, die Sie auch in Ihrem Status dort oben haben,
in Ihrem Formularstatus, den Sie an den Reduzierer übergeben. Nachdem dies hinzugefügt wurde, stellen wir sicher, dass der Textänderungshandler
ausgeführt wird und dieses Eingabebezeichnerargument erhält.
Das Textargument wird auch empfangen, da dies das Standardargument ist, das React Native
uns sowieso übergeben würde, und dieses wird dann automatisch als letztes Argument in dieser Funktion empfangen.
Wir müssen das also nicht und können es hier eigentlich
nicht binden, es wird automatisch weitergeleitet.
Jetzt haben wir hier eine wiederverwendbare Textänderungs-Handler-Funktion und können diese auch
den anderen Eingaben zuweisen, wie hier der imageUrl, wie hier unten für den Preis, wir können den
Textänderungs-Handler binden, diese binden und dann ist der Preis unsere Kennung hier und natürlich
auch für die beschreibung, dort fügen wir dies ein und binden dann daran und der bezeichner ist beschreibung.
Jetzt kann derselbe Handler für alle Eingaben verwendet werden, aber im Moment macht er natürlich
eine Sache, er validiert jede Eingabe auf ihre Länge.
Nun, das mag Sinn machen und
hier auch, sollte keine Eingabe leer sein, aber Sie möchten vielleicht auch
eine andere Validierung, zum Beispiel sollte mein Preis hier eine Zahl größer als Null sein,
sagen wir, damit Null als Eingabe nicht zulässig ist. Dies ist jedoch kein Kriterium, das mir
bei anderen Eingaben wichtig ist. Wir werden später eine elegante Lösung dafür finden. Lassen
Sie uns zunächst bei dieser Validierung des kleinsten gemeinsamen Nenners bleiben, die wir auf alle Eingaben anwenden können, um sicherzustellen,
dass sie zumindest nicht leer sind,
und konzentrieren wir uns auf die Reduzierungsfunktion und den Formstatus sollte sich ändern,
wenn diese Aktion zur Aktualisierung der Formulareingabe mit all diesen Daten gesendet wird,
da im Moment nichts passiert.
Wir haben dort unseren Anfangszustand auf dem Reduzierer und dieser wird im Formzustand übergeben oder gespeichert, aber
dieser Zustand wird sich nie ändern.
Deshalb senden wir eine Aktion aus, oder?
Aus diesem Grund tun wir
dies hier. Aus diesem Grund wird die Aktualisierung der Formulareingabe ausgelöst. Aus diesem Grund möchten wir hier im
Reduzierer Code schreiben, wenn diese Aktion uns hier erreicht.
Wenn uns diese Aktion erreicht, besteht das Ziel letztendlich darin, sicherzustellen, dass wir diesen
Status-Snapshot,
unseren aktuellen Status-Snapshot, entsprechend aktualisieren.
Dies bedeutet, dass wir zum Beispiel einige aktualisierte Werte benötigen und dafür ein neues Objekt
erstellen, da meine
Eingabewerte hier ein Objekt sind und ich ein neues erstellen werde, um es zu ersetzen,
und zunächst das vorhandene kopieren werde Zustandseingabewerte.
Denken Sie daran, dass der Status hier automatisch übergeben wird. Dies ist unser aktueller
Status-Snapshot, bevor wir ihn aktualisieren. Daher ist dies zunächst beispielsweise dieser Status-Snapshot, und dieser enthält einen
Schlüssel für Eingabewerte, der wiederum
ein Objekt enthält, und
genau das ist es Ich kopiere hier, ich kopiere alle Schlüssel-Wert-Paare dieses Eingabewert-Snapshots und möchte dann das Schlüssel-Wert-Paar
für die Eingabe ersetzen, für die diese Aktion ausgelöst wurde. Das Gute
ist, dass wir die Eingabe anhängen Kennung der Aktion. Wir können also zum Reduzierer gehen
und hier in den kopierten Eingabewerten einen Schlüssel dynamisch überschreiben.
Der Schlüssel ist Aktion. Eingabe natürlich, das ist unsere Eingabe-ID, die wir an die Aktion angehängt haben, und
der Wert sollte Aktion sein. Wert, das
ist alles was wir tun müssen. Daher speichern wir den Wert, der mit
der ebenfalls dynamisch zugewiesenen Eingabe gesendet wurde, dynamisch und aktualisieren unsere kopierten Eingabewerte.
Jetzt können wir hier einen neuen Status zurückgeben, da dies das Ziel Ihres eigenen Reduzierers ist,
wie beim Redux-Reduzierer. Am Ende muss ein neuer Status-Snapshot zurückgegeben werden.
Dort möchte ich den vorhandenen Status kopieren, aber die Eingabewerte mit dem überschreiben aktualisierte Werte, die meine alten Werte kopieren, sodass
keine Daten verloren gehen, und dann eines der Schlüssel-Wert-Paare ersetzen. Jetzt geht es natürlich nicht nur darum, die
Werte zu ersetzen oder zu aktualisieren, sondern
auch meine Gültigkeiten zu aktualisieren.
Hier sind meine aktualisierten Gültigkeiten, und genau wie bei den Werten kopiere ich zunächst meinen Eingabevaliditätsschlüssel,
da die Eingabevaliditäten hier ein Schlüssel sind, wie Sie sehen können, und
dann
möchte ich eine Gültigkeit für die Eingabe ersetzen, die wir für die Aktion erhalten Titel, imageUrl oder was auch immer es ist und
dies durch Aktion ersetzen, ist gültig, weil wir die Information erhalten, ob dies gültig ist
oder nicht, als Teil der Aktion, die ausgelöst wird, richtig?
Wir leiten dies hier basierend auf dieser grundlegenden Validierung weiter, die wir hier haben.
Damit müssen wir dies nur noch hier aktualisieren, sodass unsere
Eingabevaliditäten hier den aktualisierten Gültigkeiten entsprechen und wir jetzt nur noch die Gesamtgültigkeit des
Formulars verwalten müssen. Dazu füge ich eine
Variable hinzu, eine Hilfsvariable. Das Formular ist gültig, was zunächst wahr ist, und dann durchlaufe ich alle meine
aktualisierten Gültigkeiten, die meine alten
kopierten Gültigkeiten sind, und dann
die eine aktualisierte Gültigkeit für die Eingabe, die wir gerade eingegeben haben.
Hier haben wir also eine for / in-Schleife, in der wir alle Schlüssel in aktualisierten Gültigkeiten durchgehen und das Ziel einfach ist.
Ich überprüfe jede Gültigkeit der Formulareingabe und wenn alle Gültigkeiten der Formulareingabe gültig sind, wenn sie alle
wahr sind, dann die Gesamtgültigkeit Formular ist gültig.
Wenn mindestens einer von ihnen falsch
ist, ist das Gesamtformular falsch, das Gesamtformular ist ungültig. Daher ist hier das gültige Formular gleich dem neuesten gültigen Status
des Formulars und dann die aktualisierte Gültigkeit der Gültigkeit für die Eingabe, die wir gerade betrachten. Für diesen Schlüssel gehen wir
also alle Eingaben hier durch.
Dieser boolesche Operator funktioniert so, dass false true überschreibt. Wenn also eine Eingabe
false ist, wird form valid auf false gesetzt und kann danach nicht auf true gesetzt werden.
Wenn also mindestens eine Eingabe ungültig ist, ist das Gesamtformular ungültig. Daher muss
ich jetzt meinen Status hier nicht mehr kopieren, da ich den gesamten
Status-Snapshot ersetzen werde und das festgelegte Formular für
mein abgeleitetes Formular gültig ist Um Verwirrung zu vermeiden, können wir auch nennen, dass dieses aktualisierte Formular hier und hier und hier und hier gültig
ist.
Nun nur eine zusätzliche Sache: Wenn wir es nicht in diesen
if-Block schaffen, also wenn eine andere Aktion ausgelöst wurde oder irgendetwas anderes, dann werde ich hier einfach den unveränderten
Zustand zurückgeben. Damit haben
wir eine Reduzierungslogik hinzugefügt, die jede Eingabe oder Eingabe in eine unserer Texteingaben verarbeiten kann. Jetzt müssen wir nur noch den
Formularstatus verwenden, der sich mit jedem Tastendruck ändert. Dies ist genau das, was
zuvor passiert ist, aber jetzt alles zentralisiert und in einen verwalteten Zustand verschmolzen, der meiner Meinung nach viel
sauberer ist als Tonnen verschiedener Zustände für Gültigkeiten und Werte. Übrigens wäre die manuelle und separate Verwaltung all
dieser Zustände zu einem großen Problem geworden, wenn Sie dann die Gültigkeit des gesamten Formulars überprüfen möchten.
Jetzt können wir den Formularstatus verwenden, der sich mit jedem Tastendruck ändert, und wir verwenden
ihn beispielsweise hier für die Werte. Wir geben den Wert für diese Texteingabe zurück, indem wir auf Eingabewerte für den Formularstatus zugreifen. Titel.
Jetzt machen wir hier natürlich dasselbe für die imageUrl, wir geben dies zurück, also genau das, was wir vorher
und jetzt mit unserem Formularstatus mit Hilfe des Reduzierers verwaltet
haben, natürlich das gleiche für den Preis und auch das gleiche für das Beschreibung, so.
Jetzt müssen wir es nicht nur hier ändern, sondern auch an einigen anderen Stellen,
zum Beispiel hier im Submit-Handler. Dort ist der Titel gültig, dieser
existiert nicht mehr, aber wir können den Titel des Formularstatus überprüfen, der wahr oder falsch ist. Wenn er falsch ist, bedeutet dies, dass er nicht gültig
ist. Daher sollte
diese Prüfung in Ordnung sein.
Natürlich kümmern wir uns jedoch um die Gültigkeit aller Eingaben. Anstatt sie hier nur manuell zu
überprüfen, indem wir sie zu einer langen if-Anweisung verketten, können wir einfach prüfen, ob das
Formularstatusformular falsch ist, da dies bedeutet, dass einige Eingaben falsch sind und Daher zeigen wir diesen Fehler,
das ist
die kürzere Prüfung, und dies ist natürlich auch dann der Fall, wenn wir vermeiden möchten, dass das Formular gesendet wird.
Wenn das Formular jedoch gesendet wird, Titelbeschreibung und imageUrl, sind diese nicht mehr vorhanden. Stattdessen
handelt es sich jetzt um den Formularstatus inputValues. Titel und so weiter, also machen
wir das
gleiche hier für die Beschreibung und für die imageUrl. Wir leiten unsere Werte aus dem
Formzustand ab, natürlich auch hier zum Erstellen. Wir bekommen den Titel und die Beschreibung und die imageUrl und natürlich auch
den Preis, den ich hier noch in eine Zahl mit dem Plus umrechne, all
das bekommen wir aus unserem Formzustand der Eingabewerte. Daher ist unsere Abhängigkeit hier natürlich nicht Titel,
Beschreibung, imageUrl usw., sondern nur Formstatus. Wenn sich der Formularstatus ändert, was bei jedem Tastendruck der
Fall ist, sollte diese Funktion neu erstellt werden und neu erstellt werden, da sich
die von der Funktion
verwendeten Informationen mit jedem Tastendruck ändern.
Die Gültigkeit kann sich mit jedem Tastendruck und den gewünschten Werten ändern Das Senden kann sich mit jedem Tastendruck ändern.
Natürlich können wir dies jetzt auch verwenden, um unsere Fehlermeldung anzuzeigen. Anstatt zu überprüfen, ob der Titel
gültig ist,
der nicht mehr existiert, überprüfen wir formState. inputValidities. Titel, wenn das falsch ist, dann möchte ich diesen Text zeigen.
Wenn wir
nun alles speichern, sollten wir dies überprüfen können. Wenn wir hier auf unsere Seite gehen,
sehen wir diesen Fehler zunächst.
Wenn ich anfange zu tippen, verschwindet es. Wenn
ich versuche, dies zu senden, schlägt es fehl, weil ich drei leere Eingaben habe.
Wenn ich dort andererseits etwas Gültiges
eingebe, funktioniert dies. Wenn ich versuche zu bearbeiten,
versuchen wir es auf Android, um die Dinge zu verwechseln.
Wenn ich also versuche, das rote Hemd hier zu bearbeiten, kann ich es ganz gut
einreichen. Jetzt versuchen wir
auch, es einzureichen, wenn es leer ist. Dann erhalte ich die Warnung.
Dies funktioniert also so, wie es
funktionieren sollte. Mit dieser eleganteren Formularverwaltung mit Use Reducer können Sie natürlich nicht nur Use Reducer verwenden, wenn
Sie mit Formularen
arbeiten. Dies ist nur ein besonders gutes Beispiel dafür, wann das Zusammenführen sinnvoll ist mehrere
Zustände zusammen und haben daher hoch wiederverwendbaren und effizienten Code.
Jetzt bin ich aber immer noch nicht fertig, denn all diese Code-Wiederholungen mit den Eingaben hier,
die immer gleich strukturiert sind, und die fehlenden Anpassungsmöglichkeiten bezüglich der Validierung sind die Dinge, die ich
als nächstes angehen möchte.