1 00:00:02,350 --> 00:00:06,760 Wir haben einige Zeit mit der Eingabe verbracht, aber die Verarbeitung von Benutzereingaben ist wichtig. 2 00:00:06,760 --> 00:00:09,970 Sie möchten dies auf eine Weise tun, die sich für den 3 00:00:09,970 --> 00:00:11,470 Benutzer natürlich anfühlt, für 4 00:00:11,590 --> 00:00:17,000 den Benutzer sinnvoll ist und bei der Sie Ihrem Benutzer niemals vertrauen und immer überprüfen, was Der Benutzer tritt 5 00:00:17,020 --> 00:00:19,750 ein und wir werden tiefer in diese ganze Validierungssache 6 00:00:19,750 --> 00:00:24,760 eintauchen. Die Benutzereingaben werden später im Kurs übergeben, wobei wir auch komplexere Eingaben als eine einfache Zahl 7 00:00:24,760 --> 00:00:25,520 akzeptieren. Im 8 00:00:25,540 --> 00:00:31,030 Moment war dies jedoch ein großartiger erster Blick darauf, wie Sie solche Stile erstellen können eine Eingabe und wie 9 00:00:31,210 --> 00:00:37,910 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 10 00:00:37,920 --> 00:00:40,710 mit unserem Spiel voranzukommen, weil wir hier irgendwie festsitzen. 11 00:00:40,710 --> 00:00:45,600 Dies sind alles wichtige Schritte, aber wir kommen hier nicht wirklich mit unserem Spiel oder unserer App voran . 12 00:00:45,600 --> 00:00:49,520 Stellen wir also sicher, dass wir das als nächsten Schritt tun, und warum 13 00:00:49,530 --> 00:00:56,690 stellen wir dafür nicht sicher, dass unsere Tasten etwas bewirken? Beginnen wir ganz schnell mit der Reset-Taste, denn das 14 00:00:56,690 --> 00:00:58,760 wird einfach. Wenn Sie darauf 15 00:00:58,790 --> 00:01:04,400 drücken, möchte ich natürlich einfach den eingegebenen Wert zurücksetzen. Also werde ich dort oben eine neue 16 00:01:04,410 --> 00:01:10,310 Funktion in der Startbildschirm-Bildschirmkomponente registrieren, den Eingabehandler zurücksetzen und das ist nur die Namenskonvention, die ich 17 00:01:10,310 --> 00:01:17,450 mag, diese Funktionen benennen, die bei einem Benutzerereignis ausgelöst werden, etwas Handler am Ende, nur um es zu machen Klar, 18 00:01:17,450 --> 00:01:19,840 dass diese bestimmte Ereignisse behandeln, es 19 00:01:19,970 --> 00:01:26,210 ist kein Muss, nur eine Präferenz, die ich für React-Apps im Allgemeinen und daher auch für React 20 00:01:26,210 --> 00:01:27,040 Native-Apps habe. 21 00:01:27,260 --> 00:01:34,040 Dies ist eine Funktion, die dann den eingestellten Wert aufruft, der hier unsere Statuseinstellungsfunktion ist, um den 22 00:01:34,220 --> 00:01:39,370 Status zu aktualisieren, den wir in die Eingabe zurückspeisen, und diesen auf eine 23 00:01:39,460 --> 00:01:46,690 leere Zeichenfolge zu setzen. Ja, damit können wir dies hier mit der Reset-Taste verbinden. onPress sollte jetzt einfach 24 00:01:46,700 --> 00:01:49,540 den Reset Input Handler so ausführen. 25 00:01:49,700 --> 00:01:50,780 Versuchen wir 26 00:01:50,780 --> 00:01:53,760 es kurz, geben wir hier etwas ein, 27 00:01:53,780 --> 00:01:55,110 setzen es zurück 28 00:01:55,310 --> 00:01:57,440 und es ist weg, das 29 00:01:57,470 --> 00:01:58,790 sieht gut aus 30 00:01:58,790 --> 00:02:09,390 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 31 00:02:09,420 --> 00:02:12,600 hier starten, aber auch um dies zu üben, möchte ich 32 00:02:12,600 --> 00:02:20,030 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 33 00:02:20,200 --> 00:02:21,090 eine Nachricht 34 00:02:21,090 --> 00:02:27,050 starten, bei der der Benutzer eine Schaltfläche zum Starten des Spiels erhält. Dies ist nur ein zusätzlicher Schritt, sodass 35 00:02:27,360 --> 00:02:30,910 wir hier einige zusätzliche Übungen haben. Dazu füge ich einen 36 00:02:30,930 --> 00:02:38,800 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 37 00:02:38,910 --> 00:02:43,020 ändern und möchten in der Lage sein, den aktuellen Status abzurufen. 38 00:02:43,020 --> 00:02:45,980 Hier erhalten wir also, ob der Benutzer bestätigt hat oder nicht, und wir 39 00:02:45,990 --> 00:02:52,410 können diesen bestätigten Status mit dem zweiten Element in dem Array festlegen, das wir extrahieren. Da unten im Bestätigungs-Eingabehandler setze 40 00:02:52,410 --> 00:03:00,160 ich "Bestätigen" auf "Wahr". Im Rücksetz-Eingabehandler setze ich dies übrigens auf "Falsch", da der Benutzer die Werte 41 00:03:00,160 --> 00:03:05,710 bestätigen muss, wenn der Benutzer auf "Zurücksetzen" klickt, damit wir dies und 42 00:03:05,710 --> 00:03:09,110 dann zurücksetzen Hier im Bestätigungs-Eingabehandler möchte ich 43 00:03:09,160 --> 00:03:12,750 auch zwei verschiedene Dinge tun, zwei andere Dinge. 44 00:03:12,880 --> 00:03:20,530 Man setzt den eingegebenen Wert zurück, speichert aber natürlich auch den eingegebenen Wert als den Wert, mit dem wir 45 00:03:20,530 --> 00:03:22,300 das Spiel starten würden. 46 00:03:22,390 --> 00:03:24,840 Wir können dies mit einem 47 00:03:24,880 --> 00:03:34,430 weiteren Status tun, den wir verwalten, der anfangs nichts enthält, keinen Wert hat und anfangs undefiniert ist, da dies die ausgewählte Nummer 48 00:03:34,430 --> 00:03:40,370 sein sollte und dies nun auch wirklich eine Nummer und kein Text sein sollte. 49 00:03:40,910 --> 00:03:44,400 Hier haben wir also die ausgewählte Nummer und eine Funktion, um 50 00:03:44,480 --> 00:03:51,560 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 51 00:03:51,610 --> 00:03:57,290 gestapelt, sodass wir den hier eingegebenen Wert auch verwenden können, nachdem wir ihn auf einen gesetzt haben leere 52 00:03:57,470 --> 00:04:02,540 Zeichenfolge, da dies nur im nächsten Renderzyklus und nicht unmittelbar nach der Ausführung dieser Zeile erfolgt. 53 00:04:02,540 --> 00:04:07,530 Wir können diesen eingegebenen Wert also weiterhin sicher ausführen oder darauf zugreifen, wenn wir 54 00:04:07,730 --> 00:04:17,930 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 55 00:04:18,050 --> 00:04:19,300 erneut darauf zugreifen 56 00:04:19,340 --> 00:04:24,980 Geben Sie hier einen Wert ein, obwohl wir ihn zurücksetzen, da dieses Rücksetzelement hier im 57 00:04:25,190 --> 00:04:30,740 Grunde genommen von React in die Warteschlange gestellt wird und erst beim nächsten Rendern der 58 00:04:30,740 --> 00:04:31,480 Komponente 59 00:04:31,580 --> 00:04:38,660 verarbeitet wird. Diese drei Statusänderungen werden alle zu einem Renderzyklus zusammengefasst kann hier sicher auf den eingegebenen Wert zugreifen, 60 00:04:38,660 --> 00:04:42,850 aber wir können es auch einfach tun, bevor wir es zurücksetzen, 61 00:04:42,860 --> 00:04:44,200 es spielt keine Rolle. 62 00:04:44,210 --> 00:04:49,520 Das Wichtigste ist jedoch, dass wir dies als Ganzzahl analysieren, damit wir diesen Text hier in eine Zahl konvertieren, 63 00:04:49,520 --> 00:04:57,050 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, 64 00:04:57,140 --> 00:05:00,410 die diese analysierte Nummer ist, und 65 00:05:00,410 --> 00:05:08,660 bevor ich etwas tue, möchte ich überprüfen, ob die gewählte Nummer keine Nummer ist, die ein Standard-Javascript-Wert ist. Wenn 66 00:05:08,660 --> 00:05:16,550 es also irgendwie immer noch keine ist Zahl, obwohl wir versuchen, nach ungültigen Zeichen zu suchen oder 67 00:05:16,550 --> 00:05:20,730 ob die gewählte Zahl kleiner oder gleich Null ist. 68 00:05:21,200 --> 00:05:24,140 Wenn dies der Fall ist, möchte ich 69 00:05:24,140 --> 00:05:25,430 nur zurückkehren, 70 00:05:25,460 --> 00:05:31,580 ich möchte nicht fortfahren, daher beendet return die Funktionsausführung und bestätigt nicht, verwendet dies nicht als 71 00:05:31,850 --> 00:05:33,710 Wert, da der Wert ungültig 72 00:05:33,830 --> 00:05:39,010 ist, nur positive Zahlen zulässig sind und Es sind keine ungültigen Nummern zulässig. 73 00:05:39,020 --> 00:05:46,340 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 74 00:05:46,350 --> 00:05:48,770 nicht zulässig wäre. Ich möchte eine 75 00:05:48,770 --> 00:05:56,600 Zahl zwischen 1 und 99 haben und es sollte eine Zahl sein. Wenn es diesen Kriterien nicht entspricht, kehren wir zurück, 76 00:05:56,840 --> 00:06:03,740 andernfalls setzen wir diese ausgewählte Nummer als ausgewählte Nummer und setzen dann die Eingabe zurück. Anschließend werden diese 77 00:06:03,740 --> 00:06:09,440 drei festgelegten Statusaufrufe gestapelt und die Komponente wird erneut gerendert und Wir haben unseren neuen 78 00:06:09,440 --> 00:06:17,790 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, 79 00:06:17,790 --> 00:06:23,700 und jetzt wäre auch ein visuelles Feedback hilfreich, um zu sehen, dass die Bestätigung funktioniert, 80 00:06:23,700 --> 00:06:32,220 oder um einen Fehler zu erhalten, wenn wir hier gegen eine dieser Regeln verstoßen, damit wir dies nicht einfach tun zurück, 81 00:06:32,220 --> 00:06:34,440 aber auch eine Warnung anzeigen. 82 00:06:35,320 --> 00:06:41,870 Beginnen wir jetzt vielleicht mit dem Feedback, bevor wir an der Warnung arbeiten. Für das Feedback, hier unten 83 00:06:42,650 --> 00:06:51,710 unter dieser Funktion, aber innerhalb unserer Funktionskomponente, möchte ich überprüfen, ob wir dies bestätigt haben, und dann einige 84 00:06:51,710 --> 00:06:54,990 spezielle Inhalte festlegen, die ausgegeben werden sollen. 85 00:06:55,010 --> 00:06:58,900 Hier haben wir also die bestätigte Ausgabe, die normalerweise 86 00:06:58,970 --> 00:07:07,340 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 87 00:07:07,340 --> 00:07:11,330 hat, und dem Benutzer die Schaltfläche zum Starten des Spiels geben. 88 00:07:11,330 --> 00:07:18,990 Um zu sehen, ob es funktioniert, lassen Sie uns dies mit einem Text hier beginnen und einfach die ausgewählte Nummer sagen 89 00:07:19,020 --> 00:07:22,470 und die ausgewählte Nummer hier ausgeben, die ausgewählte Nummer. 90 00:07:22,470 --> 00:07:25,700 Dies ist unser Status, den wir hier verwalten. 91 00:07:25,770 --> 00:07:32,100 Da wir also set verify usw. aufrufen, wird die Komponente erneut gerendert, wenn dies ausgewählt ist, 92 00:07:32,100 --> 00:07:38,010 sodass diese gesamte Komponentenfunktion erneut ausgeführt wird. Dies bedeutet, dass bestätigt dann für diesen nächsten 93 00:07:38,040 --> 00:07:43,470 Lauf wahr ist, da wir es hier und hier auf true setzen Daher setzen 94 00:07:43,500 --> 00:07:44,310 wir 95 00:07:44,310 --> 00:07:51,820 die bestätigte Ausgabe auf diesen Text und können nun die bestätigte Ausgabe hinzufügen, sagen wir hier unter unserer Karte. 96 00:07:51,820 --> 00:07:57,340 Dort möchte ich also die bestätigte Ausgabe ausgeben und das ist entweder undefiniert, 97 00:07:57,340 --> 00:07:57,940 druckt 98 00:07:58,060 --> 00:08:05,900 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 99 00:08:05,900 --> 00:08:06,410 Nummer. 100 00:08:06,950 --> 00:08:10,210 Wenn ich etwas Ungültiges wie Null eingebe, sehen wir 101 00:08:10,250 --> 00:08:15,360 es nicht, daher scheint unsere Prüfung zu funktionieren und es wird eine gültige Zahl ausgegeben. 102 00:08:15,400 --> 00:08:19,200 Das ist nicht das endgültige Design, das ich haben möchte, aber das beweist, dass es funktioniert. 103 00:08:19,390 --> 00:08:26,170 Bevor wir dieses Design fertigstellen, stellen wir sicher, dass wir auch eine Warnung anzeigen, wenn etwas Ungültiges eingegeben wird.