1
00:00:02,140 --> 00:00:06,630
Jetzt haben wir angefangen, an der Eingabe zu arbeiten, und sie sieht nicht schlecht aus,

2
00:00:06,630 --> 00:00:13,980
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

3
00:00:13,980 --> 00:00:16,440
in einige Nicht-Zahlen einfügen können. numerischer Inhalt

4
00:00:16,530 --> 00:00:20,280
und dafür müssen wir natürlich überprüfen, was der Benutzer hier eingegeben hat.

5
00:00:20,550 --> 00:00:27,900
Um nun zu überprüfen, was der Benutzer eingegeben hat, möchte ich, wie ich bereits zuvor gezeigt habe, im Grunde den Wert speichern,

6
00:00:27,900 --> 00:00:28,440
den

7
00:00:28,440 --> 00:00:33,510
der Benutzer bei jedem Tastendruck eingegeben hat, und ihn in die Eingabe zurückspeisen. Nach jedem

8
00:00:33,510 --> 00:00:39,000
Tastendruck möchte ich jedoch auch die Eingabe validieren, die vorgenommen werden soll sicher, dass wir dort einen

9
00:00:39,000 --> 00:00:44,770
gültigen Wert haben, also im Grunde eine Zahl. Dazu müssen wir zunächst einen Status hier im

10
00:00:44,860 --> 00:00:54,510
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

11
00:00:54,520 --> 00:01:02,180
state und das ist der eingegebene Wert, und obwohl dies später eine Zahl sein wird, handelt es sich technisch gesehen

12
00:01:02,300 --> 00:01:08,000
am Anfang um eine Zeichenfolge, da alle Eingaben nur eine Zeichenfolge sind und Sie diese

13
00:01:08,000 --> 00:01:09,080
dann manuell

14
00:01:09,080 --> 00:01:15,170
in eine Zahl konvertieren müssen, wenn Sie möchten. Ich werde hier auch eine festgelegte Wertfunktion hinzufügen,

15
00:01:15,170 --> 00:01:19,220
das zweite Element, das wir aus diesem Array-Verwendungsstatus abrufen, und jetzt

16
00:01:19,430 --> 00:01:25,660
können wir hier eine Konstante hinzufügen, die ich als Zahleneingabehandler oder wie auch immer Sie sie benennen möchten.

17
00:01:25,700 --> 00:01:32,830
Dadurch wird der Eingabetext abgerufen, und das ist die Funktion, da dies nur eine Funktion ist,

18
00:01:32,830 --> 00:01:40,690
die ich in dieser Konstante speichere, die ich mit meiner Eingabe und dort mit onChangeText verbinden möchte. Zeigen

19
00:01:40,960 --> 00:01:43,930
Sie auf den Zahleneingabehandler und geben

20
00:01:43,930 --> 00:01:48,330
Sie den Wert zurück, und das ist unsere eingegebener Wert.

21
00:01:48,420 --> 00:01:54,480
Normalerweise würden wir hier einfach den eingegebenen Wert setzen und den Eingabetext als unseren neu eingegebenen

22
00:01:54,480 --> 00:01:56,720
Wert festlegen, den wir in

23
00:01:56,820 --> 00:02:01,220
die Eingabe zurückspeisen, aber hier werde ich zunächst die Eingabe validieren.

24
00:02:01,290 --> 00:02:06,300
Was ich hier also tun werde, ist, dass ich meinen eingegebenen Wert nicht

25
00:02:06,330 --> 00:02:15,790
direkt auf den Text hier setze, sondern auf meinen Eingabetext, den ich ersetze, und ich kann Ersetzen aufrufen, da der Eingabetext eine Zeichenfolge ist

26
00:02:15,790 --> 00:02:22,450
und das ist eine normale Javascript-Methode, die für Zeichenfolgen vorhanden ist, wobei ich einige Inhalte basierend

27
00:02:22,450 --> 00:02:27,430
auf einem regulären Ausdruck ersetze. Jetzt können reguläre Ausdrücke beängstigend sein,

28
00:02:27,430 --> 00:02:36,010
aber das ist einfach. Wir erstellen sie mit zwei Schrägstrichen. Dort füge ich eckige Klammern hinzu und sage mit diesem Ausdruck, dass

29
00:02:36,040 --> 00:02:45,250
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

30
00:02:45,250 --> 00:02:51,630
Treffer gesucht wird, sondern der gesamte Text durchsucht wird. Ich werde dies durch eine leere Zeichenfolge ersetzen,

31
00:02:52,850 --> 00:02:53,940
sodass ich

32
00:02:56,620 --> 00:03:02,440
im Grunde jede Nicht-Zahl von löschen werde Wert. Genau das passiert hier und das speichere ich

33
00:03:02,440 --> 00:03:04,540
in meinem neuen Status. Damit

34
00:03:04,600 --> 00:03:09,460
sollten wir sicherstellen, dass der Benutzer nichts eingeben kann, was keine Nummer ist.

35
00:03:09,460 --> 00:03:11,410
Lassen Sie uns dies hier

36
00:03:11,410 --> 00:03:16,720
auf Android überprüfen. Wenn ich das Komma drücke, werden Sie sehen, dass es sofort entfernt wird

37
00:03:16,720 --> 00:03:19,960
und genau das brauchen wir hier. Wir erlauben nur Zahlenwerte.

38
00:03:19,960 --> 00:03:24,030
Das ist ein bisschen Validierung, die wir hier haben. Es

39
00:03:24,030 --> 00:03:32,890
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

40
00:03:32,890 --> 00:03:37,410
Eingabemodus befinden und diese Tastatur jetzt schließen möchten das ist nicht wirklich machbar.

41
00:03:37,420 --> 00:03:44,500
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,

42
00:03:44,500 --> 00:03:47,960
wenn der Benutzer auf eine andere Stelle tippt,

43
00:03:48,160 --> 00:03:56,020
werde ich die gesamte Ansicht hier mit einer speziellen Komponente umschließen, die von React Native bereitgestellt wird. Dies ist

44
00:03:56,020 --> 00:03:58,490
die berührbare Komponente ohne Feedback, also

45
00:03:58,630 --> 00:04:04,960
eine Komponente, die es uns ermöglicht einen Touch Listener ohne visuelles Feedback zu registrieren, denn genau

46
00:04:04,960 --> 00:04:07,060
das brauchen wir hier.

47
00:04:07,150 --> 00:04:11,080
Damit können wir unseren gesamten Bildschirm umschließen, sodass unsere

48
00:04:11,080 --> 00:04:18,190
gesamte Ansicht mit diesem berührbaren Listener ohne Feedback umhüllt werden kann, sodass wir uns dort oder dort

49
00:04:18,190 --> 00:04:24,070
registrieren und das Presseereignis anhören können. Wenn eine Presse stattfindet, möchte ich sie abweisen

50
00:04:24,070 --> 00:04:30,010
die Tastatur und dafür bietet uns React Native eine nützliche API, die wir aus React

51
00:04:30,010 --> 00:04:37,240
Native importieren können, und das ist die Tastatur-API. Das ist jetzt keine Komponente, aber das ist eine API, mit

52
00:04:37,240 --> 00:04:43,820
der wir sozusagen mit dem nativen Gerät selbst interagieren können, in diesem Fall mit der Tastatur, und hier möchte ich

53
00:04:43,820 --> 00:04:50,230
auf Knopfdruck eine Funktion auslösen, und hier gehe ich weiter Eine einfache Inline-Funktion, eine kurze anonyme Funktion. Sie können natürlich

54
00:04:50,230 --> 00:04:52,700
auch eine benannte Funktion verwenden, aber hier

55
00:04:52,870 --> 00:04:57,230
möchte ich nur die Tastatur aufrufen. entlassen.

56
00:04:57,310 --> 00:05:02,680
Das ist eine Funktion, die uns diese Tastatur-API bietet, die wir aus React Native importieren, und die genau

57
00:05:02,680 --> 00:05:04,220
das tut, was der

58
00:05:04,360 --> 00:05:06,570
Name andeutet. Wenn wir jetzt hier tippen, können

59
00:05:06,580 --> 00:05:12,610
wir tippen, aber wenn ich woanders tippe, schließen wir die Tastatur und die von Der Kurs findet auf beiden Plattformen statt

60
00:05:12,640 --> 00:05:17,740
und ich denke, das ist eine bessere Benutzererfahrung, da Sie erwarten würden, dass Sie die Tastatur schließen,

61
00:05:18,160 --> 00:05:21,040
wenn Sie auf eine andere Stelle auf dem Bildschirm tippen.