1 00:00:02,250 --> 00:00:03,310 Warst du erfolgreich? 2 00:00:03,350 --> 00:00:04,710 Machen wir es zusammen. 3 00:00:04,710 --> 00:00:11,390 Lassen Sie uns hier in der Zieleingabe eine neue Komponente erstellen, indem Sie React from React 4 00:00:11,500 --> 00:00:14,040 importieren. Dann benenne ich diese 5 00:00:14,040 --> 00:00:20,610 Zieleingabe und ich mag diese konstante Syntax hier. Sie könnten die Eingabe des Funktionsziels verwenden, um 6 00:00:20,610 --> 00:00:28,120 Ihre Funktionskomponente zu erstellen. Das wäre in Ordnung auch. Dann exportiere ich hier die Standardzieleingabe und jetzt müssen wir hier 7 00:00:28,120 --> 00:00:31,030 etwas zurückgeben und dass etwas am Ende dieser Ansicht 8 00:00:31,030 --> 00:00:33,700 mit der Texteingabe und der Schaltfläche ist. 9 00:00:34,090 --> 00:00:42,650 Lassen Sie mich also die gesamte Ansicht erfassen und hier in Klammern zurückgeben, damit diese mehrzeilig geschrieben und gut formatiert 10 00:00:42,650 --> 00:00:50,110 ist. Natürlich müssen wir jetzt erneut Inhalte aus React Native importieren, da wir einige Komponenten aus React 11 00:00:50,110 --> 00:00:55,840 Native verwenden , wir verwenden die Ansichtskomponente, wir verwenden die Texteingabekomponente, wir verwenden 12 00:00:55,840 --> 00:01:00,460 die Schaltflächenkomponente und ich möchte auch die Stylesheet-Komponente verwenden, um 13 00:01:00,460 --> 00:01:02,270 mein Stylesheet-Objekt einzurichten. 14 00:01:02,470 --> 00:01:10,510 Fügen wir dazu hier Stylesheet hinzu. Erstellen Sie ein Objekt und übergeben Sie es an dieses Stylesheet. Methode erstellen und natürlich 15 00:01:11,140 --> 00:01:16,840 die Stile aus der App übernehmen. js-Datei, das wäre der Eingabecontainer und die Eingabe. Schneiden 16 00:01:16,840 --> 00:01:21,540 Sie also beide so aus, dass nur der Bildschirm hier und wieder in der Zieleingabe verbleibt. 17 00:01:21,730 --> 00:01:28,510 Ich füge beide hier zu meinem Stylesheet hinzu, damit dies wieder funktioniert. Was im Moment nicht funktioniert, ist, dass wir, wenn 18 00:01:28,510 --> 00:01:37,840 wir auf die Schaltfläche tippen, dies hinzufügen, weil wir hier nicht den Status in der Zieleingabe haben und wenn ich auf die Schaltfläche tippe, möchte ich 19 00:01:37,870 --> 00:01:42,790 tatsächlich etwas in der App tun. js. 20 00:01:42,910 --> 00:01:49,480 Also müssen wir zuerst den Staat spalten. Das eingegebene Ziel sollte nicht in der App verwaltet werden. js, aber es sollte 21 00:01:49,480 --> 00:01:54,040 in der Zieleingabe verwaltet werden, da dort am Ende die Texteingabe 22 00:01:54,040 --> 00:02:01,360 steht, in die der Benutzer das Ziel eingibt. Fügen wir also hier den useState-Import in die Zieleingabe ein und fügen dann 23 00:02:01,360 --> 00:02:08,950 hier unsere Statusverwaltungslogik mit dem eingegebenen Ziel hinzu und setzen das eingegebene Ziel, das wir von useState erhalten, das wir mit einer leeren Zeichenfolge initialisiert haben. Fügen 24 00:02:08,950 --> 00:02:14,650 wir es hier zur Zieleingabe und aus der App hinzu. In js-Datei nehme ich auch den Zieleingabehandler, schneide 25 00:02:14,650 --> 00:02:18,780 ihn von dort aus und füge ihn hier zur Zieleingabe hinzu, sodass 26 00:02:18,820 --> 00:02:24,910 diese Funktion in einer Funktion, die wir mit onChangeText verbinden, und jetzt damit das Abrufen der Benutzereingaben 27 00:02:24,910 --> 00:02:26,490 wieder funktionieren sollte. 28 00:02:26,740 --> 00:02:32,660 Wenn wir nun die Taste drücken, möchte ich eine Funktion in der App auslösen. js, ich möchte den Add Goal Handler auslösen und diese Funktion sollte hier 29 00:02:32,680 --> 00:02:38,360 bleiben, da ich die Liste hier verwalten muss, weil die App. Die js-Datei ist die einzige Komponente, die 30 00:02:38,560 --> 00:02:44,350 Zugriff auf die Zieleingabe und die FlatList hat, in der wir die Ziele ausgeben. Wenn wir 31 00:02:44,350 --> 00:02:52,950 davon sprechen, können wir dort bereits Zieleingaben in die App importieren. js von Komponenten Zieleingabe und Zieleingabe als Komponente 32 00:02:52,950 --> 00:03:02,010 hier über der FlatList hinzufügen, aber jetzt müssen wir wieder herausfinden können, wann eine Schaltfläche in dieser Komponente gedrückt 33 00:03:02,010 --> 00:03:06,790 wird, und in React tun Sie dies, indem Sie die 34 00:03:06,790 --> 00:03:14,740 Funktion übergeben, die das Kind hat Die Komponente sollte schließlich als Requisite für die untergeordnete Komponente 35 00:03:14,740 --> 00:03:16,150 ausgeführt werden. 36 00:03:16,150 --> 00:03:20,850 Hier könnten wir also onAddGoal hinzufügen, dieser Name liegt ganz bei Ihnen, es ist 37 00:03:20,860 --> 00:03:22,230 eine Requisite, die 38 00:03:22,840 --> 00:03:25,990 Sie definieren, und dies zeigt auf Add Goal Handler. 39 00:03:26,030 --> 00:03:32,980 Dies allein macht nichts, aber onAddGoal wird jetzt als Requisite innerhalb der Zieleingabe empfangen und zeigt auf eine 40 00:03:32,980 --> 00:03:37,520 Funktion, was bedeutet, dass wir es dort als Funktion ausführen können. 41 00:03:37,540 --> 00:03:41,550 Bei der Toreingabe kann ich dort in der Presse einfach 42 00:03:41,950 --> 00:03:45,990 auf die Stütze zeigen. onAddGoal, richtig? 43 00:03:46,000 --> 00:03:51,370 Da onAddGoal dieser Requisitenname ist, richte ich ihn hier in der App ein. js-Datei, die innerhalb der Zieleingabe für das 44 00:03:51,370 --> 00:03:57,430 Requisitenobjekt empfangen wird, das wir in jeder Funktionskomponente erhalten, und onAddGoal zeigt auf eine Funktion, sodass 45 00:03:57,430 --> 00:04:00,200 wir sie an onPress übergeben können, damit 46 00:04:00,330 --> 00:04:05,630 onPress oder React Native daher wissen, dass diese Funktion aufgerufen werden soll Wenn wir 47 00:04:05,630 --> 00:04:06,470 die 48 00:04:06,550 --> 00:04:09,430 Taste drücken, tun Sie dies in React Native. 49 00:04:09,430 --> 00:04:17,150 Trotzdem hätten wir ein Problem, da ich mich beim Hinzufügen eines Zielhandlers auf das eingegebene Ziel beziehe und das zuvor hier verwaltet wurde, aber 50 00:04:17,170 --> 00:04:19,670 nicht mehr. Wir haben das eingegebene Ziel verwaltet, 51 00:04:19,750 --> 00:04:25,540 bei dem es sich um die vom Benutzer im Ziel eingegebene Texteingabe handelt Eingabe jetzt und nicht in 52 00:04:25,550 --> 00:04:26,340 App. js. 53 00:04:26,950 --> 00:04:32,620 Der Add-Goal-Handler sollte also jetzt tatsächlich ein Argument erhalten, das der Zieltitel ist oder wie auch immer Sie ihn benennen 54 00:04:32,620 --> 00:04:33,160 möchten. 55 00:04:33,190 --> 00:04:37,530 Dieser Name liegt bei Ihnen und das ist es, was wir hier als Wert speichern. 56 00:04:37,540 --> 00:04:47,700 Jetzt müssen wir sicherstellen, dass wir dieses Argument weiterleiten, wenn beim Hinzufügen eines Ziels in der Zieleingabe ausgeführt wird. 57 00:04:48,870 --> 00:04:55,350 Das passiert hier in einer Presse und dort zeigen wir nur darauf, um auch ein Argument einzurichten, 58 00:04:55,350 --> 00:04:58,410 das schließlich weitergegeben werden sollte. Wir erhalten 59 00:04:58,410 --> 00:05:02,620 zwei Optionen. Option eins ist, dass wir hier eine anonyme Pfeilfunktion einrichten. 60 00:05:02,640 --> 00:05:08,250 Jetzt wird diese Pfeilfunktion irgendwann ausgeführt und daher können wir hier jetzt Klammern 61 00:05:08,250 --> 00:05:09,930 hinzufügen, da dies jetzt 62 00:05:09,960 --> 00:05:16,050 nicht ausgeführt wird, wenn dies zuerst gerendert wird. Stattdessen wird diese Pfeilfunktion als auszuführende Funktion 63 00:05:16,050 --> 00:05:17,730 für onPress und 64 00:05:17,730 --> 00:05:25,230 jetzt hier in onAddGoal registriert. Wir können beispielsweise das eingegebene Ziel weiterleiten, das funktionieren würde, oder alternativ verwenden 65 00:05:25,290 --> 00:05:30,690 wir diesen anonymen Pfeilfunktionsansatz nicht und können daher hier keine Klammern hinzufügen, aber 66 00:05:30,690 --> 00:05:38,790 dann können wir eine andere Javascript-Funktion für Funktionen verwenden, an die wir bind aufrufen können Konfigurieren Sie einige Argumente vor, 67 00:05:39,120 --> 00:05:43,560 die eventuell weitergegeben werden sollen, wenn diese Funktion ausgeführt wird. 68 00:05:43,560 --> 00:05:47,190 Das erste Argument ist immer, worauf sich dieses Schlüsselwort beziehen sollte. 69 00:05:47,190 --> 00:05:52,680 Dies ist für uns hier nicht wichtig, daher können wir dies einfach schreiben, aber das zweite Argument 70 00:05:52,680 --> 00:05:58,440 hier oder alle anderen Argumente danach sind tatsächlich die Argumente, die von dieser Funktion empfangen werden, wenn sie aufgerufen 71 00:05:58,440 --> 00:06:00,270 und per Knopfdruck aufgerufen wird. 72 00:06:00,270 --> 00:06:06,210 Dies sind nun die Argumente, die an die Funktion onAddGoal weitergeleitet werden, die am Ende 73 00:06:06,210 --> 00:06:10,600 nur unsere Funktion zum Hinzufügen von Zielhandlern ist. Dort benötigen wir 74 00:06:10,620 --> 00:06:12,080 den Zieltitel, also 75 00:06:12,120 --> 00:06:17,740 müssen wir diesen weiterleiten. Daher kann ich hier jetzt die Eingabe einrichten Ziel als weiterzuleitendes 76 00:06:17,940 --> 00:06:20,760 Argument und das ist hier normale Vanille-Javascript-Syntax. 77 00:06:21,850 --> 00:06:24,740 Und jetzt wird es gerendert, das sieht gut aus und 78 00:06:24,740 --> 00:06:25,920 wenn ich "Learn React 79 00:06:26,090 --> 00:06:31,340 Native" eingebe, wird hier immer noch eine Ausgabe ausgegeben. Damit alles funktioniert, aber jetzt teilen 80 00:06:31,340 --> 00:06:36,770 wir diese App in mehrere Komponenten auf, wie Sie es normalerweise in React-Apps 81 00:06:36,770 --> 00:06:42,740 und React Native-Apps tun, genau wie in React für Web-Apps, da Ihre Komponenten schlanker, fokussierter 82 00:06:42,800 --> 00:06:46,550 und Ihr Code organisierter bleiben und leichter zu verstehen.