Wir haben einige Zeit mit der Eingabe verbracht, aber die Verarbeitung von Benutzereingaben ist wichtig.
Sie möchten dies auf eine Weise tun, die sich für den
Benutzer natürlich anfühlt, für
den Benutzer sinnvoll ist und bei der Sie Ihrem Benutzer niemals vertrauen und immer überprüfen, was Der Benutzer tritt
ein und wir werden tiefer in diese ganze Validierungssache
eintauchen. Die Benutzereingaben werden später im Kurs übergeben, wobei wir auch komplexere Eingaben als eine einfache Zahl
akzeptieren. Im
Moment war dies jedoch ein großartiger erster Blick darauf, wie Sie solche Stile erstellen können eine Eingabe und wie
Sie sicherstellen können, dass Sie die Daten erhalten, die Sie benötigen. Damit weiß ich nichts über dich, aber ich denke, es ist Zeit, auch
mit unserem Spiel voranzukommen, weil wir hier irgendwie festsitzen.
Dies sind alles wichtige Schritte, aber wir kommen hier nicht wirklich mit unserem Spiel oder unserer App voran .
Stellen wir also sicher, dass wir das als nächsten Schritt tun, und warum
stellen wir dafür nicht sicher, dass unsere Tasten etwas bewirken? Beginnen wir ganz schnell mit der Reset-Taste, denn das
wird einfach. Wenn Sie darauf
drücken, möchte ich natürlich einfach den eingegebenen Wert zurücksetzen. Also werde ich dort oben eine neue
Funktion in der Startbildschirm-Bildschirmkomponente registrieren, den Eingabehandler zurücksetzen und das ist nur die Namenskonvention, die ich
mag, diese Funktionen benennen, die bei einem Benutzerereignis ausgelöst werden, etwas Handler am Ende, nur um es zu machen Klar,
dass diese bestimmte Ereignisse behandeln, es
ist kein Muss, nur eine Präferenz, die ich für React-Apps im Allgemeinen und daher auch für React
Native-Apps habe.
Dies ist eine Funktion, die dann den eingestellten Wert aufruft, der hier unsere Statuseinstellungsfunktion ist, um den
Status zu aktualisieren, den wir in die Eingabe zurückspeisen, und diesen auf eine
leere Zeichenfolge zu setzen. Ja, damit können wir dies hier mit der Reset-Taste verbinden. onPress sollte jetzt einfach
den Reset Input Handler so ausführen.
Versuchen wir
es kurz, geben wir hier etwas ein,
setzen es zurück
und es ist weg, das
sieht gut aus
und stellen auch sicher, dass diese Schaltfläche hier, die Bestätigungstaste, etwas bewirkt. Dazu füge ich eine weitere Schaltfläche hinzu, bestätige den Eingabehandler und wir könnten das Spiel einfach sofort
hier starten, aber auch um dies zu üben, möchte ich
dem Benutzer eine letzte Chance geben, seine Wahl zu ändern, also möchte ich hier nur freundlich sein Wenn Sie dies ausgeben möchten, möchten Sie
eine Nachricht
starten, bei der der Benutzer eine Schaltfläche zum Starten des Spiels erhält. Dies ist nur ein zusätzlicher Schritt, sodass
wir hier einige zusätzliche Übungen haben. Dazu füge ich einen
neuen Status hinzu, der verwaltet, dass der Benutzer den Status noch bestätigt hat. Dies ist zunächst falsch, aber natürlich können wir dies
ändern und möchten in der Lage sein, den aktuellen Status abzurufen.
Hier erhalten wir also, ob der Benutzer bestätigt hat oder nicht, und wir
können diesen bestätigten Status mit dem zweiten Element in dem Array festlegen, das wir extrahieren. Da unten im Bestätigungs-Eingabehandler setze
ich "Bestätigen" auf "Wahr". Im Rücksetz-Eingabehandler setze ich dies übrigens auf "Falsch", da der Benutzer die Werte
bestätigen muss, wenn der Benutzer auf "Zurücksetzen" klickt, damit wir dies und
dann zurücksetzen Hier im Bestätigungs-Eingabehandler möchte ich
auch zwei verschiedene Dinge tun, zwei andere Dinge.
Man setzt den eingegebenen Wert zurück, speichert aber natürlich auch den eingegebenen Wert als den Wert, mit dem wir
das Spiel starten würden.
Wir können dies mit einem
weiteren Status tun, den wir verwalten, der anfangs nichts enthält, keinen Wert hat und anfangs undefiniert ist, da dies die ausgewählte Nummer
sein sollte und dies nun auch wirklich eine Nummer und kein Text sein sollte.
Hier haben wir also die ausgewählte Nummer und eine Funktion, um
sie festzulegen, und wenn der Benutzer auf Bestätigen geklickt hat, bevor ich meinen eingegebenen Wert zurückgesetzt habe, wird dies hier ohnehin alle zusammen
gestapelt, sodass wir den hier eingegebenen Wert auch verwenden können, nachdem wir ihn auf einen gesetzt haben leere
Zeichenfolge, da dies nur im nächsten Renderzyklus und nicht unmittelbar nach der Ausführung dieser Zeile erfolgt.
Wir können diesen eingegebenen Wert also weiterhin sicher ausführen oder darauf zugreifen, wenn wir
möchten, da ich hier meinen eingegebenen Wert mit parseInt festlegen möchte, indem ich den eingegebenen Wert übergebe. Daher setze ich diesen Wert auf meine ausgewählte Nummer und kann
erneut darauf zugreifen
Geben Sie hier einen Wert ein, obwohl wir ihn zurücksetzen, da dieses Rücksetzelement hier im
Grunde genommen von React in die Warteschlange gestellt wird und erst beim nächsten Rendern der
Komponente
verarbeitet wird. Diese drei Statusänderungen werden alle zu einem Renderzyklus zusammengefasst kann hier sicher auf den eingegebenen Wert zugreifen,
aber wir können es auch einfach tun, bevor wir es zurücksetzen,
es spielt keine Rolle.
Das Wichtigste ist jedoch, dass wir dies als Ganzzahl analysieren, damit wir diesen Text hier in eine Zahl konvertieren,
und tatsächlich werde ich noch einen zusätzlichen Schritt hinzufügen, bevor ich das tue. Gleich zu Beginn habe ich hier meine gewählte Nummer,
die diese analysierte Nummer ist, und
bevor ich etwas tue, möchte ich überprüfen, ob die gewählte Nummer keine Nummer ist, die ein Standard-Javascript-Wert ist. Wenn
es also irgendwie immer noch keine ist Zahl, obwohl wir versuchen, nach ungültigen Zeichen zu suchen oder
ob die gewählte Zahl kleiner oder gleich Null ist.
Wenn dies der Fall ist, möchte ich
nur zurückkehren,
ich möchte nicht fortfahren, daher beendet return die Funktionsausführung und bestätigt nicht, verwendet dies nicht als
Wert, da der Wert ungültig
ist, nur positive Zahlen zulässig sind und Es sind keine ungültigen Nummern zulässig.
Außerdem möchte ich eine zusätzliche Prüfung hinzufügen und prüfen, ob die gewählte Zahl möglicherweise größer als 99 ist, da dies ebenfalls
nicht zulässig wäre. Ich möchte eine
Zahl zwischen 1 und 99 haben und es sollte eine Zahl sein. Wenn es diesen Kriterien nicht entspricht, kehren wir zurück,
andernfalls setzen wir diese ausgewählte Nummer als ausgewählte Nummer und setzen dann die Eingabe zurück. Anschließend werden diese
drei festgelegten Statusaufrufe gestapelt und die Komponente wird erneut gerendert und Wir haben unseren neuen
Status, in dem diese Nummer als ausgewählte Nummer berücksichtigt wird. Jetzt können wir den Bestätigungs-Eingabehandler hier mit der Bestätigungsschaltfläche verbinden,
und jetzt wäre auch ein visuelles Feedback hilfreich, um zu sehen, dass die Bestätigung funktioniert,
oder um einen Fehler zu erhalten, wenn wir hier gegen eine dieser Regeln verstoßen, damit wir dies nicht einfach tun zurück,
aber auch eine Warnung anzeigen.
Beginnen wir jetzt vielleicht mit dem Feedback, bevor wir an der Warnung arbeiten. Für das Feedback, hier unten
unter dieser Funktion, aber innerhalb unserer Funktionskomponente, möchte ich überprüfen, ob wir dies bestätigt haben, und dann einige
spezielle Inhalte festlegen, die ausgegeben werden sollen.
Hier haben wir also die bestätigte Ausgabe, die normalerweise
nur undefiniert ist. Wenn wir jedoch bestätigt haben, ist die bestätigte Ausgabe ein JSX-Code, in dem wir zusammenfassen, was der Benutzer eingegeben
hat, und dem Benutzer die Schaltfläche zum Starten des Spiels geben.
Um zu sehen, ob es funktioniert, lassen Sie uns dies mit einem Text hier beginnen und einfach die ausgewählte Nummer sagen
und die ausgewählte Nummer hier ausgeben, die ausgewählte Nummer.
Dies ist unser Status, den wir hier verwalten.
Da wir also set verify usw. aufrufen, wird die Komponente erneut gerendert, wenn dies ausgewählt ist,
sodass diese gesamte Komponentenfunktion erneut ausgeführt wird. Dies bedeutet, dass bestätigt dann für diesen nächsten
Lauf wahr ist, da wir es hier und hier auf true setzen Daher setzen
wir
die bestätigte Ausgabe auf diesen Text und können nun die bestätigte Ausgabe hinzufügen, sagen wir hier unter unserer Karte.
Dort möchte ich also die bestätigte Ausgabe ausgeben und das ist entweder undefiniert,
druckt
nichts auf den Bildschirm oder es ist dieser Text. Wenn wir zurückgehen und ich die Nummer eingebe und hier bestätige, sehen wir die
Nummer.
Wenn ich etwas Ungültiges wie Null eingebe, sehen wir
es nicht, daher scheint unsere Prüfung zu funktionieren und es wird eine gültige Zahl ausgegeben.
Das ist nicht das endgültige Design, das ich haben möchte, aber das beweist, dass es funktioniert.
Bevor wir dieses Design fertigstellen, stellen wir sicher, dass wir auch eine Warnung anzeigen, wenn etwas Ungültiges eingegeben wird.