Nachdem diese Aktion ausgelöst wurde, können wir zum Reduzierer gehen und hier Code für die Eingabeänderung schreiben, und das
ist sehr einfacher Code.
Wir geben einen neuen Status zurück, in den ich meinen alten Status kopiere und den Wert mit Aktion aktualisieren möchte. value, weil value eine Eigenschaft ist, die ich für diese
Aktion habe, die andere ist isValid und das ist die andere Sache, die ich auch
bei jedem Tastendruck aktualisieren möchte, isValid für diese Eingabe, nicht für das
gesamte Formular, sondern für diese intern verwaltete Eingabe. Ich werde hier nicht berührt aktualisieren, stattdessen sollte berührt aktualisiert werden, wenn
wir tatsächlich den Fokus verlieren, da dies bedeutet, dass der Benutzer für den Moment mit der
Eingabe von Inhalten fertig ist. Jetzt möchte ich dies als berührt markieren und möglicherweise Validierungsfehler anzeigen. Hier ist der Handler für verlorenen Fokus eine Funktion,
die ich hinzufüge, und dort werde ich eine Aktion
auslösen. Jetzt erstelle
ich hier oben eine Aktionskennung, Eingabeunschärfe
wie diese, Eingabeunschärfe wie diese und jetzt können wir Eingabeunschärfe hier versenden, müssen keine Daten anhängen und jetzt können wir sie in unserem Reduzierer verwenden dass in einem anderen Fall
Eingabeunschärfe und wenn dies der Fall ist, gebe ich einen neuen Status zurück, in dem ich den alten Status kopiere, weil
ich den Wert behalten möchte und gültig ist und das nicht ändere, aber
ich möchte so schnell wie möglich auf true setzen Wenn wir eine Eingabe verwischen, wird sie als berührt behandelt.
Jetzt müssen wir nur noch diese Funktion anschließen, also werde ich den onBlur-Listener hier einstellen und auf den Handler für verlorenen Fokus zeigen, damit
dieser ausgelöst wird, wenn diese Eingabe unscharf wird.
Nun, das ist alles schön und dies verwaltet den Status innerhalb dieser Eingabe. Natürlich muss ich
den Wert und die Informationen, ob diese Eingabe gültig ist oder nicht, an
meine Eltern weiterleiten, also an den Bildschirm zum Bearbeiten des Produkts. Daher können wir hier einen Verwendungseffekt als Import in die Eingabekomponente hinzufügen und
ihn
möglicherweise hier hinzufügen. In der Funktion "Verwendungseffekt" möchte ich eine Funktion aufrufen, die ich über Requisiten erhalten möchte, möglicherweise bei einer Änderung
der Eingabe. Der Name liegt bei Ihnen und ich werde dies einfach ausführen und meinen Eingabestatuswert weiterleiten, und mein Eingabestatus ist eine gültige Information, so dass wir in der
übergeordneten Komponente hier eine Funktion hinzufügen können, die diese am Ende abhört, die ausgelöst wird. Das empfängt
diese beiden Argumente und dann im übergeordneten Element, sodass wir in
der Bildschirmkomponente dort unseren Status aktualisieren können. Jetzt ist es wichtig, wann dieser
Verwendungseffekt ausgeführt wird und nicht nach jedem Tastendruck? Stattdessen sollte dies immer dann ausgeführt werden,
wenn sich unser Eingabestatuswert ändert oder natürlich gültig ist. Da dies von uns abhängt oder um genau zu sein, senden wir diese Informationen möglicherweise
nur dann, wenn der eingegebene Eingabestatus wahr ist, da sich die übergeordnete Komponente sonst möglicherweise nicht darum kümmert.
Unsere Abhängigkeit hier ist also der gesamte Eingabestatus, da wir alle Werte verwenden, diese Funktion jedoch
nur dann auf die übergeordnete Komponente auslösen, wenn sie berührt wird. Daher wird dieser
Effekt häufiger ausgeführt, meistens jedoch nicht Solange Berühren nicht wahr ist und Requisiten natürlich auch unsere
Abhängigkeit sind. Um hier eine unendliche Rendering-Schleife zu vermeiden, können wir die Objektzerstörungssyntax verwenden und Eingabewechsel herausziehen, sodass wir
dies nicht tun, wenn sich andere Requisiten ändern Setzen Sie diesen Effekt erneut ein, da wir dort unten Änderungen an den
Eingaben benötigen. Jetzt können wir hinzufügen, dass dies eine Abhängigkeit ist. Andere Änderungen an den
Requisiten lösen dies nicht aus.
Jetzt rufen wir dies für die übergeordnete Komponente auf, wenn dies berührt wird, und leiten dann den Wert und die
Gültigkeit dieser Eingabe an die übergeordnete Komponente weiter.
Lassen Sie uns das jetzt im Bildschirm zum Bearbeiten des Produkts nutzen. Dort können wir bei unseren Eingaben wie bei der Titeleingabe
die Requisite zum Ändern der Eingabe hinzufügen, und das ist die Requisite, auf die ich hier richtig ziele. Sie müssen
also die richtige Benennung und Dies erwartet eine Funktion als Wert, die dann beim
Aufruf zwei Argumente erhält - den Wert und die Gültigkeit dieser Eingabe.
Hier möchte ich also auf eine Funktion verweisen, und das kann unser sagender Eingabewechsel-Handler sein. Wir können dies recyceln. Ich benenne
es einfach um, um es passender zu machen.
Damit der Eingabewechsel-Handler hier wie folgt ausgelöst werden kann, möchte ich immer noch meine Kennung übergeben, da ich diese für alle
meine Eingaben wiederverwenden möchte, und jetzt, da ich in der Bildschirmkomponente bin,
werden wir mehrere Eingaben haben und dort , wir bekommen also unsere Kennung und dann bekommen wir den Wert und die
gültigen Informationen, oder?
Eingabewert und Eingabevalidität, das bekommen wir, richtig, denn das ist es, was
wir hier aus der Eingabekomponente heraus weiterleiten, das
ist es, was wir
bei der Eingabeänderungsfunktion an diese weitergeben. Daher müssen wir hier keine Validierung durchführen, sondern nur diese Informationen weiterleiten. Wir leiten den Eingabewert weiter, wir leiten die Eingabevalidität
weiter und dies geschieht nur, wenn die Eingabe übrigens berührt wird. Wenn sie also den Fokus verliert und dies natürlich nur eine Einschränkung
ist,
die ich hier hinzugefügt
habe, müssen Sie den Fokus verloren haben, Sie Sie können natürlich auch zur Eingabekomponente gehen
und diese entfernen, wenn Sie überprüfen, ob die Gültigkeit und der Wert in der übergeordneten Komponente
für jede Eingabe und für jeden Tastendruck aktualisiert werden sollen. Eine weitere Sache, die ich tun möchte, ist, dass ich
dies hier in einen Rückruf für die Verwendung einbinden möchte, damit diese Funktion nicht unnötig neu erstellt wird, da wir daran denken, dass wir diese
Funktion bei einer Eingabeänderung in der Eingabekomponente und dort übergeben haben Auf der anderen Seite ist dies
eine
Abhängigkeit von diesem Effekt, sodass
dieser Effekt wiederholt wird, wenn sich dies ändert.
Es sollte sich also nicht zu oft ändern, um unnötige Effektläufe zu vermeiden. Daher
müssen wir hier unsere Abhängigkeiten angeben. Die einzige Abhängigkeit, die wir haben, ist der Status des Versandformulars, der sich
tatsächlich nie ändern wird. Wir sind also gut,
dies
sollte niemals neu erstellt werden, weil die Die Logik dort
ändert sich nicht, wir erhalten alle Werte, die wir als Argumente benötigen. Damit habe ich in meinem Produktbildschirm noch meine Formulare, die natürlich alle Formularwerte und Formulargültigkeiten enthalten, aber ich verwalte sie nur Dies hier,
weil ich es später einreichen muss und weil ich die Gesamtgültigkeit des Formulars ableiten muss. Ich mache das nicht, weil
ich hier jede Eingabe verwalten muss,
wir machen das stattdessen innerhalb der Eingabekomponente. Für die Einreichung usw. benötigen
wir
weiterhin die Informationen zu jedem Geschäft, jedoch den Wert. Wenn ich jetzt zur Eingabe zurückkehre, vergessen Sie nicht, dass Sie auch den Anfangswert
festlegen müssen und ob dieser anfänglich gültig
sein soll. Wenn ich also zum Bildschirm zum Bearbeiten des Produkts zurückkehre, sollten wir hier den Anfangswert auf setzen Was?
Nun, wir können überprüfen, ob wir ein bearbeitetes Produkt haben, und wenn wir dies tun, sollte der Anfangswert
hier bearbeitet werden. Titel,
ansonsten ist es eine leere Zeichenfolge und dies sollte anfänglich gültig sein. Verwenden Sie diese Requisite hier,
wenn wir ein bearbeitetes
Produkt haben. Wenn dies der
Fall ist, mit dem Doppelknall hier, wenn dies wahr ist. Wenn wir kein bearbeitetes Produkt haben, kann dies zunächst nicht gültig
sein.
Dann übergebe ich false, was
gut ist, und genau das sollte der Fall sein.
Jetzt können wir diese beiden Zeilen auch in die imageUrl kopieren. Dort leiten wir natürlich den
Bild-URL-Wert als Standardwert weiter, ansonsten kann er so bleiben. Für den Preis haben wir niemals einen Anfangswert und
er wird niemals anfänglich gültig sein. Zur Beschreibung hingegen können wir dies
noch einmal hinzufügen und hier auf Beschreibung verweisen.
Damit muss ich eine Sache in der Eingabekomponente beheben, über die ich auch gerade nachgedacht habe. Natürlich
ist hier der Formularstatus nicht mehr verfügbar. Stattdessen haben wir hier
unseren internen Status und ich habe diesen Eingabestatus benannt Was mein
Reduzierer zurückgibt, sollten wir
hier natürlich verwenden.
Hier haben wir also inputState. Wert als Wert, so einfach ist das
und hier haben wir inputState. isValid als Scheck und das sollte alles sein.
Wenn wir dies speichern und uns das ansehen, wollen wir sehen, ob das funktioniert. Wenn wir hierher gehen, haben wir anfangs alle Fehlermeldungen,
was sinnvoll ist, da sie anfangs alle ungültig sind.
Wenn ich hier anfange zu tippen, erhalte ich einen Fehler, kann die Variable isValid in meiner Eingabekomponente nicht finden,
die in sein muss Dieser Handler, der bei jedem Tastendruck ausgelöst wird, wahrscheinlich hier, ja, im Reduzierer sollte ich
natürlich die Aktion überprüfen.
isValid, nicht nur isValid, ich muss
dies aus der Aktion herausholen. Lassen Sie uns mit diesem
Fix hier zurückgehen und es erneut versuchen. Wenn ich anfange zu tippen, wird dies gelöscht.
Wenn ich dies zurücksetze, kommt mein Fehler jedoch nicht zurück, so dass dies ein kleiner
Fehler ist, den wir beheben müssen. Für den Preis wird 0
dann nicht als gültig behandelt, einer auch nicht. Die Validierung hat
also einige Probleme, aber die Eingabe usw. funktioniert,
aber lassen Sie uns sehen, was jetzt mit der Validierung nicht stimmt.
Natürlich funktioniert die Validierung hier nicht, wir verwenden sie nicht.
Bitte denken Sie daran, dass ich immer überprüfe, ob diese Art der Validierung für diese Eingabe oder diesen Typ oder diesen Typ aktiviert ist, und wir
tun dies mit Hilfe dieser speziellen Requisiten, die wir einstellen müssen. Derzeit ist keine
Validierung aktiviert, daher werden nur die ungültigen Standardwerte berücksichtigt.
Wenn ich zum Bildschirm zum Bearbeiten von Produkten gehe, aktivieren wir diese spezielle Validierung jetzt, indem wir
die richtigen Requisiten festlegen, z. B. hier für die Titeleingabe. Auf der imageUrl ebenfalls erforderlich. Auf den Preis hier, erforderlich und vielleicht
auch min gleich Null, so dass Null die Mindestanzahl ist, die wir eingeben müssen, oder eine
Zahl
größer als diese tatsächlich, also vielleicht 0. 1 ist unsere Mindestanzahl. Für die Beschreibung sollte auch erforderlich sein und möglicherweise auch eine
Mindestlänge von 5, um mindestens 5 Zeichen zu haben. Es gibt noch eine zusätzliche Sache, die wir hier im
Bildschirm zum Bearbeiten des Produkts tun müssen. Dieser Handler für Eingabewechsel muss hier natürlich auch zu jeder
Eingabe hinzugefügt werden, nicht nur zur Titeleingabe. Wir müssen dies also für die
imageUrl hinzufügen, andernfalls wird später eine Fehlermeldung angezeigt. Wir müssen dies hier zur Preiseingabe hinzufügen. Wir müssen dies hier natürlich auch zur Beschreibungseingabe
hinzufügen und den Bezeichner ersetzen auf die richtige Weise.
Lassen Sie uns dies testen und Sie werden etwas
Seltsames bemerken, wenn Sie hier tippen, das funktioniert, wenn
Sie imageUrl eingeben, nicht richtig
funktioniert, die Validierung nicht aktualisiert wird und Sie zumindest auch nicht zurückkehren können das könnte stecken bleiben.
Wenn wir dies also mit einem Befehlsfehler oder zweimaligem Drücken von R auf Android neu laden und dies hier erneut versuchen,
sagen wir zum Preis, Sie werden feststellen, dass dies funktioniert, aber warum funktioniert es nicht und
das gleiche wäre übrigens der Fall Wenn Sie es auf der imageUrl
versucht haben, funktioniert dies hier. Warum funktioniert es, wenn ich zuvor eine andere Eingabe bearbeitet
habe, weil es jetzt beispielsweise bei einem Titel nicht mehr funktioniert? Und das Problem hängt damit zusammen, dass es hier stecken bleibt.
Wir rendern diese Komponente viel zu oft neu und der Grund dafür ist wirklich schwer zu finden.
Am Ende haben wir hier eine
Art Endlosschleife und das Problem ist unser Eingabewechsel-Handler.
Wir verwenden hier den Rückruf, um unnötige Neuerstellungen zu vermeiden, aber wenn wir ihn dann so binden, machen wir
ihn irgendwie veraltet. Das macht jetzt keinen Unterschied mehr, da dadurch für jeden erneuten Renderzyklus eine neue
Funktionsbindung erstellt wird.
Am Ende müssen wir also die Bindung hier entfernen und sie an all diesen Stellen hier
entfernen, da dies
unsere App beschädigen wird. Dies führt zu zu vielen Wiederholungszyklen, da der
Rückruf keine Wirkung hat und wir dies möglicherweise tun
Ich möchte eine ID-Requisite des Titels usw. an unsere Eingabekomponente weiterleiten.
Fügen wir dies also zu all diesen Eingaben hinzu. Diese ID-Requisite ist im Grunde das, was ich zuvor im Bindungsaufruf hinzugefügt habe. Wir leiten dies also
einfach an die Eingabekomponente weiter, damit wir es dort verwenden können. Lassen Sie uns dies
für alle diese Eingaben hier und tun Wie können wir das jetzt nutzen?
Nun, innerhalb der Eingabe haben wir jetzt diese ID-Requisite direkt verfügbar,
sodass wir sie dort einfach anhängen können.
Hier können wir also Requisiten weiterleiten. id oder einfach ID, damit wir hier keine Requisiten hinzufügen müssen
und stattdessen die ID hier aus den Requisiten herausziehen müssen, wie wir es bei der Eingabeänderung getan haben, und
ID als Abhängigkeit von diesem Effekt danach hinzufügen. Und jetzt leiten wir den Bezeichner dieser
Eingabe weiter, aber auf eine elegantere Weise, die die Verwendung von bind vermeidet,
die letztendlich diese Funktion für jeden Renderzyklus neu erstellt
und somit zu einer Endlosschleife führt, und daher jetzt, wenn wir dies
und uns neu laden Gehen Sie hier zum Admin-Bereich, jetzt kann ich hier und auch hier etwas eingeben und jetzt funktioniert dies, da wir
jetzt diesen unendlichen Renderzyklus vermeiden und die Validierung erhalten, wie wir wollten.
Dies ist nun mein Ansatz oder dies ist der Ansatz, den ich Ihnen hier zeigen wollte, mit dem Sie eine
wiederverwendbare Eingabekomponente verwenden können, die ihre eigene Validierung durchführt, die Sie von außen konfigurieren können und in
der Sie das Gesamtformular noch verwalten können.
Lassen Sie uns damit in
eine Feinabstimmung eintauchen, wie zum Beispiel das Stylen dieser angezeigten Fehlermeldung, dieser Validierungsfehlermeldung und das Steuern, wann
wir sie anzeigen, weil ich sie nicht immer anzeigen möchte.