Um zu überprüfen, was der Benutzer
eingegeben hat, möchte ich natürlich bei jedem Tastendruck etwas tun.
Jetzt haben wir onChangeText hier bereits als Listener für den Titel
und zum Beispiel setzen wir den Titel in unserem Status.
Der nächste Schritt besteht nun darin, dies nicht nur
zu tun, sondern die Eingabe nicht nur zu speichern, sondern auch zu validieren und die Gültigkeit dieser Eingabe in einem bestimmten
Zustand zu verwalten.
Daher füge ich hier eine neue Funktion hinzu, zum Beispiel einen Titeländerungs-Handler, der den eingegebenen Text abruft und dann etwas tun kann, und ich lagere dies einfach
in eine separate benannte Funktion aus, um ein bisschen sauberer und leichter zu folgen
entlang des Codes, weil ich diesen Listener jetzt hier an mein onChangeText-Ereignis binden werde, so dass diese Funktion bei
jedem Tastendruck ausgelöst wird und ich dort natürlich immer noch meinen Titel mit dem Text festlegen werde, aber jetzt
möchte
ich zusätzlich, wie gesagt, auch verwalten die Gültigkeit und dafür können
wir einen weiteren Zustand hinzufügen, den wir verwalten möchten.
Vielleicht können wir hier nach der Verwaltung des Titelwerts auch festlegen, dass der Titel ein gültiger Status ist oder wie
auch immer Sie ihn aufrufen möchten, und dass der hinzugefügte Set-Titel hier als Setter-Funktion gültig
ist. Dieser Status hier könnte dann
zunächst falsch sein, sodass wir ihn zunächst behandeln dies als ungültig. Jetzt können wir dies für jeden Tastendruck hier im Titeländerungshandler
überprüfen, bevor wir dies speichern und unseren Titelstatus aktualisieren können. Jetzt liegt es ganz
bei Ihnen, wie Sie dies überprüfen möchten.
Sie können beispielsweise sagen, dass dies nur gültig ist, wenn Sie einen Text haben, der nicht leer ist. Wenn also der Text länger
als Null ist. Text ist natürlich eine Zeichenfolge.
Wenn die Länge also Null ist, bedeutet dies, dass es sich um eine leere Zeichenfolge handelt.
Wir können auch Text nennen. Trimmen, um überschüssiges Leerzeichen zu kürzen, sodass auch nur ein paar Leerzeichen
nicht als gültig behandelt werden.
Natürlich können Sie auch die Validierung der minimalen oder maximalen Länge hinzufügen, indem Sie die Länge hier überprüfen. Sie
können auch die Validierung regulärer Ausdrücke hinzufügen, um den Text auf bestimmte Muster zu überprüfen. Dies werden
wir später auch tun, aber um loszulegen,
werde ich es tun Überprüfen Sie es einfach so
und jetzt hier, wenn wir größer als Null sind, geht es uns
gut, aber wenn wir eine Länge von Null haben, geht es uns nicht gut.
Hier möchte ich also
festlegen, dass der Titel gültig auf falsch gesetzt ist, andernfalls setzen wir den festgelegten
Titel
natürlich auf wahr. Wenn wir also eine gültige
Eingabe haben und den Titel immer selbst festlegen, müssen wir das immer speichern, wir
darf diese Benutzereingabe niemals verlieren, sonst
brechen wir die App.
Und jetzt, da die Titelgültigkeit im Status gespeichert ist, können wir sie natürlich hier in unserem jsx-Code verwenden, um zu
überprüfen, ob der Titel zum Beispiel nicht gültig ist, und wenn dies der Fall ist, können wir hier dynamisch
einen Text ausgeben, wo wir zum Beispiel sagen Bitte geben Sie einen gültigen Titel ein, um hier eine kleine Fehlermeldung anzuzeigen, der
Sie natürlich auch ein Styling zuweisen können.
Wenn Sie hier zu unserer Eingabe gehen, sehen Sie, dass die Fehlermeldung von Anfang an angezeigt
wird, da wir in einem ungültigen Zustand beginnen. Wenn wir mit der Eingabe beginnen,
verschwindet diese, aber wenn ich alle Eingaben entferne, wird sie erneut angezeigt Einige grundlegende Überprüfungen, die Sie hinzufügen können, um Ihrem Benutzer
eine kleine Fehlermeldung oder einen kleinen Hinweis anzuzeigen, um sicherzustellen, dass die Benutzer zumindest eine Vorstellung davon haben,
welche Art von Eingabe Sie wünschen.
Jetzt können Sie diese Gültigkeit natürlich nicht nur zum Ausgeben von Fehlermeldungen verwenden, sondern auch vermeiden, dass Ihr
Formular gesendet wird, wenn es ungültig ist.
Hier im Submit-Handler, wo ich meine Daten immer übermittle und ein Produkt erstelle oder aktualisiere, unabhängig davon, ob die Eingabe gültig
ist, können wir die gesammelten Gültigkeitsdaten verwenden und beispielsweise prüfen, ob
der Titel gültig ist und nicht gültig, daher das Ausrufezeichen, dann kehren wir einfach zurück,
was bedeutet, dass wir
die Funktionsausführung abbrechen
und der Code danach nicht ausgeführt wird. Außerdem möchten wir möglicherweise nicht nur zurückkehren, sondern
können natürlich auch eine Warnung aus React
Native importieren und a auslösen nette native Warnung hier. Wir können also einfach eine Warnung mit einer
Meldung über falsche Eingaben oder einem Titel davon und einer Meldung mit der Bitte überprüfen Sie die Fehler im Formular und fügen Sie dort einfach eine Schaltfläche
hinzu, auf der wir "OK" sagen, da dann nichts anderes zu tun ist, um dies zu bestätigen Damit haben
wir hier
einen schönen Ablauf, in dem wir den Benutzer warnen, dass die Eingabe ungültig ist.
Wenn ich zum Beispiel jetzt versuche, diese Eingabe mit meinem ungültigen Titel zu senden, wird dieser Fehler angezeigt. Nur wenn
ich einen gültigen Titel eingebe, kann ich ihn senden, da ich noch keine Validierung für die anderen Eingaben hinzugefügt
habe, die wir natürlich sollten .
So einfach können Sie mit der Validierung beginnen.
Da wir hier Javascript verwendet haben, können Sie natürlich auch andere Validierungsbibliotheken von Drittanbietern einbinden, z. B.
ValidateJS, ein Paket, das Sie in Ihr Projekt installieren und verwenden können, um Zeichenfolgen für bestimmte Muster einfach zu
validieren, wenn Sie dies möchten das zu tun. In diesem Modul schreibe ich die grundlegenden
Muster,
die wir manuell verwenden, damit Sie ein klares Verständnis dafür bekommen, was dort wirklich
passiert, aber Sie können auch solche Bibliotheken von Drittanbietern unbedingt einbinden.
Nun, mit diesem grundlegenden Verständnis der Validierung und so weiter, stellen wir sicher,
dass wir jetzt auch zu einem Formular- und Eingabemanagement übergehen, das skalierbarer ist und nicht Tonnen
von Zuständen umfasst, die wir manuell verwalten müssen.