1 00:00:02,340 --> 00:00:06,210 Es wurde viel geredet, viel getan, jetzt ist es wirklich an der 2 00:00:06,210 --> 00:00:10,680 Zeit, dass diese Schaltfläche funktioniert und wir hier ein Ziel hinzufügen, richtig, und dafür 3 00:00:10,680 --> 00:00:11,780 müssen wir natürlich 4 00:00:11,850 --> 00:00:17,040 herausfinden, was der Benutzer eingegeben hat, und danach Hören Sie sich ein Tippen auf die Schaltfläche 5 00:00:17,040 --> 00:00:23,850 an und fügen Sie das eingegebene Ziel zu einer Reihe von Zielen hinzu, die wir irgendwo verwalten müssen. Diese können wir 6 00:00:23,850 --> 00:00:26,460 dann in dieser unteren Ansicht dort unten ausgeben. 7 00:00:26,460 --> 00:00:26,850 Richtig, 8 00:00:26,850 --> 00:00:29,630 das müssen wir tun. In diesem Kurs 9 00:00:29,670 --> 00:00:35,600 werde ich Funktionskomponenten nur mit der relativ neuen Funktion "React Hooks" verwenden. Falls Sie React 10 00:00:35,640 --> 00:00:41,550 Hooks noch nicht kennen, lernen Sie sie auf jeden Fall zuerst kennen, z. B. in 11 00:00:41,550 --> 00:00:42,120 meinem 12 00:00:42,120 --> 00:00:47,250 React Complete Guide, den ich ausführlich behandele Im Anhang finden Sie auch einige 13 00:00:47,250 --> 00:00:54,000 andere Ressourcen, mit denen Sie mit React-Hooks beginnen können, da wir React-Hooks benötigen, um beispielsweise Benutzereingaben zu erhalten. 14 00:00:54,000 --> 00:01:00,280 Wir haben den useState-Hook für das verwendet, was wir aus React importieren, nicht aus React 15 00:01:00,300 --> 00:01:02,070 Native, sondern aus 16 00:01:02,220 --> 00:01:10,620 React. Es ist eine Kernfunktion von React. Hier in dieser Funktionskomponente, in dieser App-Komponente, können wir das eingegebene Ziel und 17 00:01:10,620 --> 00:01:19,110 auch das Set erhalten Zielfunktion eingegeben, um den Status mit Hilfe von useState zu aktualisieren. Standardmäßig haben wir einen Anfangsstatus, 18 00:01:19,110 --> 00:01:24,840 der eine leere Zeichenfolge ist, da der Benutzer zu Beginn nichts eingegeben hat. 19 00:01:24,870 --> 00:01:27,330 Jetzt können wir dies an 20 00:01:27,330 --> 00:01:33,870 die Texteingabe binden. Wenn der Benutzer ein Zeichen eingibt, möchten wir unseren Status aktualisieren und den eingegebenen 21 00:01:33,870 --> 00:01:39,240 Text in dem Status speichern, auf den wir dann über das eingegebene Ziel zugreifen 22 00:01:39,240 --> 00:01:46,680 können, und das eingegebene Ziel übergeben zurück in die Texteingabe. Das ist diese bidirektionale Bindung, eine sogenannte kontrollierte Komponente, die Sie 23 00:01:46,680 --> 00:01:50,380 auch aus React for Web mit normalen HTML-Eingabeelementen kennen. 24 00:01:50,430 --> 00:01:57,340 Hier können wir also onChangeText anhören, eine Requisite, die durch Texteingabe bereitgestellt wird und eine Funktion übernimmt, 25 00:01:57,430 --> 00:01:59,930 die bei jedem Tastendruck ausgeführt wird. 26 00:01:59,970 --> 00:02:04,660 Jetzt könnten wir hier eine Inline-Funktion bereitstellen, aber wir können auch eine separate Funktion einrichten, um 27 00:02:04,660 --> 00:02:09,850 ein bisschen saubereren Code zu haben, und Sie können eine Funktion in einer Funktion haben, und wir 28 00:02:09,850 --> 00:02:17,770 müssen sie hier haben, damit wir unseren Status oder verwenden können Stellen Sie hier die eingegebene Zielfunktion ein, indem Sie hier einfach eine neue Funktion hinzufügen. Der 29 00:02:18,990 --> 00:02:26,400 Zieleingabehandler kann ein Name sein. Der Name liegt jedoch bei Ihnen. In dieser Funktion erhalten wir den eingegebenen Text 30 00:02:26,580 --> 00:02:34,170 automatisch, der hier von React oder React Native übergeben wird. Anschließend können wir das eingegebene Ziel festlegen und den 31 00:02:34,200 --> 00:02:40,770 eingegebenen Text als Wert übergeben, da der hier eingegebene Text bereits a ist Zeichenfolge, weil wir den 32 00:02:41,100 --> 00:02:48,630 Zieleingabehandler mit onChangeText verbinden, indem wir hier einfach darauf zeigen. Nun, das ist wichtig, fügen Sie dort unten keine Klammern 33 00:02:48,900 --> 00:02:54,300 hinzu, da dies diese Funktion ausführen würde, wenn dieser Code analysiert wird, also wenn die 34 00:02:54,330 --> 00:02:59,880 Benutzeroberfläche zum ersten Mal gerendert wird. Sie möchten dies jedoch nicht sofort ausführen, 35 00:02:59,880 --> 00:03:05,940 Sie möchten es bei jedem Tastendruck ausführen und daher nehmen Sie einfach den Namen der Funktion, Sie 36 00:03:05,940 --> 00:03:12,210 übergeben diesen Namen der Funktion an onChangeText und das sagt React Native effektiv, hey das ist das Funktion, 37 00:03:12,210 --> 00:03:19,260 die ich für jeden Tastendruck ausführen sollte, also füge hier keine Klammern hinzu, damit dies bei jedem Tastendruck ausgeführt werden kann. 38 00:03:20,010 --> 00:03:25,170 Anstelle dieser Funktionssyntax können Sie übrigens auch eine andere Syntax verwenden, die ich im 39 00:03:25,170 --> 00:03:31,080 Verlauf des Kurses verwenden werde. Dabei erstellen Sie hier eine Konstante mit diesem Namen, und 40 00:03:31,080 --> 00:03:38,190 dann ist der Wert dieser Konstante nach dem Gleichheitszeichen einfach a Funktion mit dieser Pfeilfunktionssyntax. Dies ist also hier 41 00:03:38,180 --> 00:03:44,490 Ihre Argumentliste und dies ist der Funktionskörper. Das ist normale Javascript-Syntax, sie wird vom Javascript-Code 42 00:03:44,490 --> 00:03:49,470 unterstützt, den React Native ausführen kann, und daher ist dies die Syntax, die ich 43 00:03:49,470 --> 00:03:56,820 verwenden werde. Sie verbinden sie genauso wie zuvor mit onChangeText. Okay, jetzt haben wir diese Funktion verbunden. Wir aktualisieren 44 00:03:57,090 --> 00:04:01,050 unseren Status mit dem, was der Benutzer bei jedem Tastendruck eingegeben 45 00:04:01,050 --> 00:04:07,800 hat. Jetzt müssen wir diesen Text auch wieder an die Texteingabe übergeben, damit er dort korrekt angezeigt wird, indem 46 00:04:07,800 --> 00:04:14,190 wir einfach die value-Eigenschaft an binden eingegebenes Ziel, also zu unserem Zustand, der sich mit jedem Tastendruck ändert. 47 00:04:14,870 --> 00:04:20,400 Und damit erhalten wir Zugriff auf die Benutzereingaben, da diese jetzt immer 48 00:04:20,400 --> 00:04:27,010 in einem eingegebenen Ziel gespeichert werden. Wenn der Benutzer die Taste drückt, möchten wir das 49 00:04:27,040 --> 00:04:33,730 eingegebene Ziel verwenden. Dazu füge ich hier eine weitere Funktion hinzu, füge einen Zielhandler hinzu und das ist nur eine Namenskonvention, 50 00:04:33,940 --> 00:04:39,310 die ich hier für diese Funktionen verwende. Sie können sie beliebig benennen Was auch immer Sie 51 00:04:39,310 --> 00:04:45,820 von Ihren React-Apps gewohnt sind, am Ende sollte der Funktionsname einfach beschreiben, was passieren wird, und dass hier ein Druck 52 00:04:45,820 --> 00:04:52,920 auf diese Schaltfläche ausgeführt wird, der am Ende ein Ziel hinzufügt. Hier nimmt die Funktion keine Argumente an, aber im Funktionskörper möchte 53 00:04:52,920 --> 00:04:58,150 ich mein eingegebenes Ziel zu einer Liste von Zielen hinzufügen, und wir haben noch keine Liste. 54 00:04:58,230 --> 00:05:04,830 Daher mache ich hier vorerst das Konsolenprotokoll, das in React unterstützt wird Natives, eingegebenes Ziel, damit wir zumindest sehen, dass dieses 55 00:05:04,830 --> 00:05:10,710 korrekt gespeichert wurde und diese Funktion ausgeführt wird. Damit dies ausgeführt werden kann, müssen 56 00:05:10,710 --> 00:05:16,680 wir es mit der Schaltfläche verbinden. Dort können wir die onPress-Requisite hinzufügen und auf den 57 00:05:16,680 --> 00:05:24,160 Add Goal-Handler zeigen, ebenfalls ohne Klammern, damit dies nicht sofort ausgeführt wird, sondern nur, wenn ein Druck erfolgt. 58 00:05:24,540 --> 00:05:33,720 Und jetzt speichern wir all das und gehen wir zurück und lassen Sie uns vielleicht lernen, React Native zu lernen. Das Gute ist, dass Sie hier Ihre 59 00:05:33,720 --> 00:05:41,560 echte Tastatur verwenden und auf Hinzufügen klicken können. Sie sollten hier in Ihrem Terminal dieses Protokoll sehen. Sie werden es auch sehen 60 00:05:41,560 --> 00:05:48,130 Übrigens in Ihren Expo-Entwicklertools hier auf der Registerkarte Browser. Wenn Sie dort auf eines der angeschlossenen 61 00:05:48,150 --> 00:05:52,670 Geräte klicken, auf das Sie in meinem Fall nur auf die 62 00:05:52,670 --> 00:05:57,730 Schaltfläche klicken, das Android-Gerät, sehen Sie dort unten auch Learn React Native. 63 00:05:57,730 --> 00:06:05,350 Und natürlich funktioniert es auch unter iOS. Erfahren Sie alles über React Native. Wenn Sie dies hier eingeben und auf 64 00:06:05,350 --> 00:06:12,840 Hinzufügen klicken, wird dies auch hier protokolliert und in den Expo-Entwicklungstools angezeigt, wenn Sie auf das iPhone klicken Ganz 65 00:06:12,840 --> 00:06:16,810 unten sehen wir dieses Protokoll. Okay, wir bekommen die 66 00:06:16,910 --> 00:06:21,530 Benutzereingaben, wir speichern sie, wir protokollieren sie auf der Konsole, natürlich wollen 67 00:06:21,530 --> 00:06:27,530 wir sie nicht auf der Konsole protokollieren, wir wollen sie stattdessen hier unterhalb unserer Eingabe ausgeben, 68 00:06:27,530 --> 00:06:35,000 wir wollen eine Liste unserer Ziele unterhalb dieses Eingabebereichs. Dafür benötigen wir hier die zweite Ansicht, die unsere Liste der Elemente ausgeben soll. 69 00:06:35,030 --> 00:06:40,250 Hier zwischen dem öffnenden und dem schließenden Tag möchte ich alle Elemente ausgeben, die wir hinzugefügt 70 00:06:40,280 --> 00:06:45,740 haben, alle Ziele, die wir hinzugefügt haben. Dazu müssen wir zuerst unsere Ziele verwalten 71 00:06:46,400 --> 00:06:51,780 und können einen anderen Status für das einrichten, was anfangs ein leeres Array ist. Daher übergebe 72 00:06:51,860 --> 00:06:58,010 ich ein leeres Array als Wert an useState und dort haben wir unsere Kursziele und festgelegte Kursziele Funktion. 73 00:06:58,010 --> 00:07:03,070 Jetzt liegen diese Namen immer bei Ihnen, aber sie sollten beschreiben, was sich in Ihrem Status befindet und wie 74 00:07:03,070 --> 00:07:04,230 Sie ihn aktualisieren können. 75 00:07:04,240 --> 00:07:10,330 Wenn wir jetzt hier ein Ziel hinzufügen, möchte ich meine Kursziele aktualisieren, um das neue 76 00:07:10,330 --> 00:07:20,840 Ziel hinzuzufügen. Dazu kann ich festgelegte Kursziele aufrufen und jetzt Kursziele in einem neuen Array festlegen, in dem ich meine alten Kursziele nehme und ein hinzufüge 77 00:07:20,840 --> 00:07:21,740 ein neues. 78 00:07:21,740 --> 00:07:25,100 Dies ist die Syntax, die Sie vielleicht nicht kennen. Dies ist 79 00:07:25,100 --> 00:07:30,470 der sogenannte Spread-Operator. Es handelt sich um eine Javascript-Funktion, die ein vorhandenes Array verwendet, und Kursziele sind ein 80 00:07:30,470 --> 00:07:38,030 Array. Es ist unser aktueller Status-Snapshot vor dem Update und zieht alle Elemente daraus heraus Array und fügt sie dann hier zu einem neuen Array 81 00:07:38,030 --> 00:07:43,280 hinzu, weshalb ich die umgebenden eckigen Klammern habe. Ohne diese umgebenden eckigen Klammern würde dies nicht funktionieren, 82 00:07:43,280 --> 00:07:43,840 aber 83 00:07:43,850 --> 00:07:49,310 jetzt erstellen wir ein neues Array und fügen alle Elemente des alten Arrays hinzu und jetzt können wir Fügen 84 00:07:49,310 --> 00:07:51,100 Sie auch ein neues Element hinzu. 85 00:07:51,110 --> 00:07:53,370 Also füge ich hier ein Komma hinzu, 86 00:07:53,390 --> 00:08:00,310 um ein zusätzliches Element nach all den Elementen hinzuzufügen, die ich hier herausziehe, und das Element, das ich hier hinzufüge, ist natürlich mein eingegebenes Ziel. 87 00:08:00,320 --> 00:08:04,680 Jetzt aktualisieren wir unsere Liste der Ziele mit der alten Liste der 88 00:08:04,730 --> 00:08:10,250 Ziele, zunächst eine leere Liste, aber diese wird mit der Zeit wachsen, da wir dann auch 89 00:08:10,250 --> 00:08:17,380 ein neues Ziel hinzufügen, wenn wir diese Taste drücken. Nun eine kleine Randnotiz: Wenn Sie mit festgelegten Kurszielen 90 00:08:17,380 --> 00:08:21,410 arbeiten, sind die Kursziele hier unser vorheriger Status und die Art 91 00:08:21,460 --> 00:08:28,210 und Weise, wie React den Status aktualisiert. Dies sollte immer Ihr aktuellster Status-Schnappschuss sein, aber es ist nicht 100% 92 00:08:28,360 --> 00:08:32,750 garantiert, diese 100% Garantie zu haben Wenn Sie Ihren Status basierend auf 93 00:08:32,920 --> 00:08:39,250 dem alten Status aktualisieren, können Sie die Funktionsform dieser festgelegten Funktion verwenden, bei der Sie den Wert 94 00:08:39,250 --> 00:08:39,950 Ihres 95 00:08:40,060 --> 00:08:46,870 neuen Status hier nicht übergeben, sondern ihn in einer Funktion übergeben, normalerweise einer anonymen Funktion, in der Sie sich 96 00:08:46,990 --> 00:08:53,850 befinden Holen Sie sich Ihren aktuellen Status oder Ihre aktuellen Ziele, also Ihren aktuellen Status-Snapshot, und geben Sie dann 97 00:08:53,860 --> 00:09:01,240 Ihren aktualisierten Wert zurück. Hier gebe ich mein aktualisiertes Array mit dieser Inline-Pfeilfunktionssyntax zurück. Wenn Sie nur einen Ausdruck haben, können 98 00:09:01,240 --> 00:09:06,640 Sie die geschweiften Klammern und die return-Anweisung und geben Sie einfach den Wert ein, den 99 00:09:06,640 --> 00:09:08,650 Sie zurückgeben möchten, und es 100 00:09:08,680 --> 00:09:13,310 wird zurückgegeben, und das ist alles normales Javascript hier, nichts React Native-spezifisch. 101 00:09:13,450 --> 00:09:21,070 Hier nehme ich dann meine aktuellen Ziele und füge dann mein eingegebenes Ziel hinzu. Diese Syntax ist etwas besser, die andere 102 00:09:21,070 --> 00:09:26,170 Syntax hätte auch funktioniert, aber dies funktioniert garantiert immer, da 103 00:09:26,200 --> 00:09:33,520 React Native hier immer die Garantie gibt, den neuesten Status-Snapshot, bevor dann Ihre Statusänderung hier 104 00:09:33,550 --> 00:09:35,050 angewendet wird. 105 00:09:35,260 --> 00:09:42,410 Nun, das ist alles schön, wir haben jetzt eine Liste, eine Reihe von Zielen, die hier verwaltet werden. Wie können wir das jetzt aber ausgeben?