Jetzt haben wir angefangen, an der Eingabe zu arbeiten, und sie sieht nicht schlecht aus,
aber wir möchten sicherstellen, dass Benutzer nur Zahlen eingeben können, die nur Ziffern sind, und dass wir hier keinen Punkt oder ein Komma eingeben oder
in einige Nicht-Zahlen einfügen können. numerischer Inhalt
und dafür müssen wir natürlich überprüfen, was der Benutzer hier eingegeben hat.
Um nun zu überprüfen, was der Benutzer eingegeben hat, möchte ich, wie ich bereits zuvor gezeigt habe, im Grunde den Wert speichern,
den
der Benutzer bei jedem Tastendruck eingegeben hat, und ihn in die Eingabe zurückspeisen. Nach jedem
Tastendruck möchte ich jedoch auch die Eingabe validieren, die vorgenommen werden soll sicher, dass wir dort einen
gültigen Wert haben, also im Grunde eine Zahl. Dazu müssen wir zunächst einen Status hier im
Startbildschirm verwalten, also importiere ich den Nutzungsstatus und dann hier oben am Anfang dieser Komponente richte ich meinen Aufruf für den Nutzungsstatus ein, also registriere einen
state und das ist der eingegebene Wert, und obwohl dies später eine Zahl sein wird, handelt es sich technisch gesehen
am Anfang um eine Zeichenfolge, da alle Eingaben nur eine Zeichenfolge sind und Sie diese
dann manuell
in eine Zahl konvertieren müssen, wenn Sie möchten. Ich werde hier auch eine festgelegte Wertfunktion hinzufügen,
das zweite Element, das wir aus diesem Array-Verwendungsstatus abrufen, und jetzt
können wir hier eine Konstante hinzufügen, die ich als Zahleneingabehandler oder wie auch immer Sie sie benennen möchten.
Dadurch wird der Eingabetext abgerufen, und das ist die Funktion, da dies nur eine Funktion ist,
die ich in dieser Konstante speichere, die ich mit meiner Eingabe und dort mit onChangeText verbinden möchte. Zeigen
Sie auf den Zahleneingabehandler und geben
Sie den Wert zurück, und das ist unsere eingegebener Wert.
Normalerweise würden wir hier einfach den eingegebenen Wert setzen und den Eingabetext als unseren neu eingegebenen
Wert festlegen, den wir in
die Eingabe zurückspeisen, aber hier werde ich zunächst die Eingabe validieren.
Was ich hier also tun werde, ist, dass ich meinen eingegebenen Wert nicht
direkt auf den Text hier setze, sondern auf meinen Eingabetext, den ich ersetze, und ich kann Ersetzen aufrufen, da der Eingabetext eine Zeichenfolge ist
und das ist eine normale Javascript-Methode, die für Zeichenfolgen vorhanden ist, wobei ich einige Inhalte basierend
auf einem regulären Ausdruck ersetze. Jetzt können reguläre Ausdrücke beängstigend sein,
aber das ist einfach. Wir erstellen sie mit zwei Schrägstrichen. Dort füge ich eckige Klammern hinzu und sage mit diesem Ausdruck, dass
ich alles ersetze, was keine Zahl von 0 bis 9 ist Keine Zahl, global im gesamten Text, was bedeutet, dass nicht nur nach dem ersten
Treffer gesucht wird, sondern der gesamte Text durchsucht wird. Ich werde dies durch eine leere Zeichenfolge ersetzen,
sodass ich
im Grunde jede Nicht-Zahl von löschen werde Wert. Genau das passiert hier und das speichere ich
in meinem neuen Status. Damit
sollten wir sicherstellen, dass der Benutzer nichts eingeben kann, was keine Nummer ist.
Lassen Sie uns dies hier
auf Android überprüfen. Wenn ich das Komma drücke, werden Sie sehen, dass es sofort entfernt wird
und genau das brauchen wir hier. Wir erlauben nur Zahlenwerte.
Das ist ein bisschen Validierung, die wir hier haben. Es
ist zwar nicht alles, was ich will, aber wir sind immer noch nicht mit der Eingabe fertig, denn unter iOS, wenn wir uns in diesem
Eingabemodus befinden und diese Tastatur jetzt schließen möchten das ist nicht wirklich machbar.
Wir können nicht nach draußen klicken und es schließen und es wäre schön, wenn wir könnten. Um nun sicherzustellen, dass wir die Tastatur schließen können,
wenn der Benutzer auf eine andere Stelle tippt,
werde ich die gesamte Ansicht hier mit einer speziellen Komponente umschließen, die von React Native bereitgestellt wird. Dies ist
die berührbare Komponente ohne Feedback, also
eine Komponente, die es uns ermöglicht einen Touch Listener ohne visuelles Feedback zu registrieren, denn genau
das brauchen wir hier.
Damit können wir unseren gesamten Bildschirm umschließen, sodass unsere
gesamte Ansicht mit diesem berührbaren Listener ohne Feedback umhüllt werden kann, sodass wir uns dort oder dort
registrieren und das Presseereignis anhören können. Wenn eine Presse stattfindet, möchte ich sie abweisen
die Tastatur und dafür bietet uns React Native eine nützliche API, die wir aus React
Native importieren können, und das ist die Tastatur-API. Das ist jetzt keine Komponente, aber das ist eine API, mit
der wir sozusagen mit dem nativen Gerät selbst interagieren können, in diesem Fall mit der Tastatur, und hier möchte ich
auf Knopfdruck eine Funktion auslösen, und hier gehe ich weiter Eine einfache Inline-Funktion, eine kurze anonyme Funktion. Sie können natürlich
auch eine benannte Funktion verwenden, aber hier
möchte ich nur die Tastatur aufrufen. entlassen.
Das ist eine Funktion, die uns diese Tastatur-API bietet, die wir aus React Native importieren, und die genau
das tut, was der
Name andeutet. Wenn wir jetzt hier tippen, können
wir tippen, aber wenn ich woanders tippe, schließen wir die Tastatur und die von Der Kurs findet auf beiden Plattformen statt
und ich denke, das ist eine bessere Benutzererfahrung, da Sie erwarten würden, dass Sie die Tastatur schließen,
wenn Sie auf eine andere Stelle auf dem Bildschirm tippen.