1 00:00:02,330 --> 00:00:09,590 Der Add-Button hier ruft also AddGoal auf und leitet das Ziel im Grunde an die App weiter. Das ist genau das, was wir brauchen, aber 2 00:00:09,590 --> 00:00:10,860 wir müssen 3 00:00:11,030 --> 00:00:16,660 auch sicherstellen, dass das Modal geschlossen wird, wenn wir ein neues Ziel hinzufügen. 4 00:00:16,700 --> 00:00:22,790 Denken Sie jetzt daran, dass wir am Ende die modale Sichtbarkeit innerhalb der App steuern. js-Datei, da wir dort den isAddMode-Status haben, 5 00:00:22,790 --> 00:00:29,690 den wir ändern, wenn wir hier auf diese Schaltfläche klicken, beispielsweise die Schaltfläche zum Hinzufügen eines 6 00:00:29,690 --> 00:00:31,050 neuen Ziels 7 00:00:31,220 --> 00:00:38,900 und diesen Statuswert. isAddMode wird an die Zieleingabe weitergeleitet, wo wir ihn dann verwenden, um die Sichtbarkeit von 8 00:00:38,900 --> 00:00:40,310 zu steuern das modale. 9 00:00:40,340 --> 00:00:46,580 Um sicherzustellen, dass das Modal verschwindet, müssen wir einfach isAddMode innerhalb 10 00:00:46,580 --> 00:00:52,270 der App erneut ändern. js-Datei, da der neue Wert dann automatisch an die Zieleingabe weitergeleitet wird. 11 00:00:52,310 --> 00:00:56,990 Alles, was wir tun müssen, ist, einen Ziel-Handler hinzuzufügen, in dem wir die Kursziele festlegen. Außerdem müssen 12 00:00:56,990 --> 00:01:03,920 wir isAddMode auf false setzen, da wir mit dem Hinzufügen fertig sind. Nun eine kleine Randnotiz: Die Art und Weise, wie React funktioniert, 13 00:01:03,920 --> 00:01:06,500 wenn Sie zwei Zustände nacheinander festlegen, werden diese 14 00:01:06,590 --> 00:01:08,230 zusammen stapeln. Die Komponente wird 15 00:01:08,270 --> 00:01:14,060 nach der ersten Änderung und nach der zweiten Änderung nicht zweimal neu gerendert, sondern gilt grundsätzlich Alle Statusänderungen 16 00:01:14,060 --> 00:01:19,460 werden auf einmal vorgenommen und die Komponente wird nur einmal neu gerendert, was natürlich gut ist. Andernfalls 17 00:01:19,460 --> 00:01:20,110 hätten 18 00:01:20,120 --> 00:01:23,240 wir dort einen unnötigen Zyklus zum erneuten Rendern, und 19 00:01:23,240 --> 00:01:29,960 dies ist einfach eine nette Optimierung, die React für uns durchführt. So können wir absolut zwei verschiedene Zustände nacheinander so ändern 20 00:01:29,990 --> 00:01:31,760 und damit sollte das 21 00:01:31,760 --> 00:01:38,740 Modal eigentlich auch verschwinden, wenn wir dies auf false setzen. Lassen Sie es uns hier auf 22 00:01:38,740 --> 00:01:40,430 iOS testen. 23 00:01:40,480 --> 00:01:46,320 Wenn ich hier Learn React Native hinzufüge, klicke auf Hinzufügen, dies verschwindet 24 00:01:46,420 --> 00:01:52,530 und lerne jetzt viel mehr. Dies funktioniert auch und ich kann auch 25 00:01:52,530 --> 00:01:54,510 weiterhin Elemente löschen. 26 00:01:54,740 --> 00:01:58,910 Um dies auf Android zu testen, starten wir es auf 27 00:01:59,060 --> 00:02:01,310 Android neu, klicken Sie auf 28 00:02:05,490 --> 00:02:11,840 Neues Ziel hinzufügen und lernen Sie React Native hier, klicken Sie auf Hinzufügen und dies schließt 29 00:02:11,850 --> 00:02:23,740 es. Jetzt lernen wir auch hier viel mehr, so und das funktioniert auch korrekt. Jetzt zwei kleine Verbesserungen, die ich noch anwenden möchte, zum einen möchte ich die Eingabe 30 00:02:23,740 --> 00:02:29,800 löschen, sobald wir fertig sind, und außerdem möchte ich eine Schaltfläche zum Abbrechen bereitstellen, damit wir 31 00:02:29,800 --> 00:02:36,550 alternativ, anstatt diese hinzuzufügen, auch hier abbrechen können, um sie zu schließen das Modal ohne Hinzufügen eines Elements, 32 00:02:36,610 --> 00:02:40,290 denn im Moment können wir das nicht tun. 33 00:02:40,300 --> 00:02:43,300 Beginnen wir damit, unsere Eingabe hier zu 34 00:02:43,300 --> 00:02:48,480 löschen, nachdem wir etwas eingegeben haben. Dafür haben wir in der Zieleingabe am Ende 35 00:02:48,480 --> 00:02:49,530 das eingegebene 36 00:02:49,560 --> 00:02:56,370 Ziel und müssen dieses zurücksetzen, sobald wir ein neues Ziel hinzufügen. Jetzt fügen wir natürlich ein neues Ziel hinzu, wenn wir 37 00:02:56,370 --> 00:03:01,690 diesen Add-Button drücken, und am Ende lösen wir eine Funktion aus, die wir mit Hilfe der onAddGoal-Requisite erhalten. 38 00:03:01,700 --> 00:03:07,110 Um auch unsere Eingabe zu löschen, können wir hier eine Funktion innerhalb der Zieleingabekomponente 39 00:03:07,290 --> 00:03:12,440 hinzufügen, einen Zielhandler hinzufügen oder wie auch immer Sie es nennen möchten. Dies 40 00:03:12,560 --> 00:03:19,310 ist eine Funktion, die kein Argument und muss Am Ende ist es nun diese Funktion, die ich 41 00:03:19,310 --> 00:03:20,270 auslösen möchte. 42 00:03:20,300 --> 00:03:23,330 Also möchte ich Add Goal Handler 43 00:03:23,360 --> 00:03:29,660 auslösen, also meine eigene Funktion in dieser Komponente. Jetzt hier möchte ich Requisiten onAddGoal aufrufen, ohne 44 00:03:29,660 --> 00:03:35,630 hier zu binden. Wir können es einfach so aufrufen, denn wenn diese Funktion ausgeführt wird, möchte ich 45 00:03:35,630 --> 00:03:39,340 sie ausführen. Hier übergeben wir nur einen Zeiger auf diese 46 00:03:39,340 --> 00:03:44,270 Funktion ohne Klammern darf keine Klammern haben, um dies nicht zu früh auszuführen, hier 47 00:03:44,270 --> 00:03:49,460 brauchen wir unbedingt Klammern, da dies nur ausgeführt wird, wenn diese Funktion ausgeführt wird, 48 00:03:49,460 --> 00:03:52,340 und wenn ich die Funktion in meiner 49 00:03:52,340 --> 00:03:59,000 übergeordneten Komponente auslösen möchte, also in der App-Komponente hier. Und hier zu onAddGoal möchte ich natürlich mein eingegebenes Ziel 50 00:03:59,000 --> 00:03:59,390 hier 51 00:03:59,390 --> 00:04:03,770 weiterleiten, also möchte ich diesen Zustand weiterleiten, aber danach möchte ich es auch löschen. 52 00:04:04,010 --> 00:04:06,140 Danach setze ich das eingegebene 53 00:04:06,140 --> 00:04:10,930 Ziel wieder auf eine leere Zeichenfolge, wodurch der hier eingegebene Text zurückgesetzt wird. 54 00:04:10,970 --> 00:04:12,120 Das ist eine Sache, 55 00:04:12,140 --> 00:04:18,770 die andere ist eine Schaltfläche, mit der wir dies schließen können, und dafür können wir hier eine Schaltfläche hinzufügen, und diese Schaltfläche 56 00:04:18,950 --> 00:04:22,100 könnte den Titel Abbrechen haben, da diese Schaltfläche am Ende genau 57 00:04:22,100 --> 00:04:23,990 das tun sollte und für den 58 00:04:23,990 --> 00:04:24,880 Abbruch Schaltfläche, 59 00:04:24,890 --> 00:04:29,410 es könnte schön sein, nicht die Standardfarbe Blau zu haben, sondern diese Farbe zu ändern, 60 00:04:29,420 --> 00:04:33,410 und Sie können dies tun, indem Sie hier die Farbstütze hinzufügen. Zum Beispiel 61 00:04:33,410 --> 00:04:39,250 könnten wir dies hier auf Rot setzen, da Rot meiner Meinung nach eine schöne Farbe für einen Abbruch ist Taste. 62 00:04:40,850 --> 00:04:44,960 Wenn wir dies speichern und hier unter iOS testen, sehen 63 00:04:44,960 --> 00:04:47,540 wir die Schaltfläche Abbrechen und die 64 00:04:47,690 --> 00:04:55,300 Schaltfläche Hinzufügen. Wenn ich hier React Native lerne und dies hinzufüge, wird dies hinzugefügt. Wenn ich dies erneut öffne, 65 00:04:55,300 --> 00:05:02,830 wird es gelöscht und gelöscht Abbrechen macht natürlich nichts, da wir Abbrechen mit der App-Komponente verbinden müssen, in der 66 00:05:02,950 --> 00:05:06,280 wir die Sichtbarkeit durch Steuern des isAddMode steuern. 67 00:05:07,330 --> 00:05:16,090 Hier können wir also jetzt auch einen weiteren Funktionshandler in der App-Komponente hinzufügen, den Zieladditions-Handler abbrechen oder so etwas. Es ist ein sehr langer 68 00:05:16,120 --> 00:05:16,870 Name. 69 00:05:16,870 --> 00:05:21,040 Ich möchte nur klarstellen, was dies tut und wann es aufgerufen wird. 70 00:05:21,040 --> 00:05:26,800 Hier haben wir also den zusätzlichen Handler für das Abbruchziel und am Ende können wir einfach isAddMode 71 00:05:26,800 --> 00:05:28,540 auf false setzen, wodurch 72 00:05:29,050 --> 00:05:31,020 das Modal geschlossen wird, und natürlich 73 00:05:31,030 --> 00:05:36,550 tun wir nichts anderes, wir ändern unsere Kursziele nicht, weil wir abgesagt haben die Hinzufügung und 74 00:05:36,550 --> 00:05:38,590 jetzt können wir dies an das 75 00:05:38,650 --> 00:05:45,580 Zielelement, an die Zieleingabe, also an unsere Komponente hier weiterleiten. Dort können wir die onCancel-Requisite hinzufügen. Der Name dieser Requisite liegt natürlich 76 00:05:45,580 --> 00:05:48,330 bei Ihnen, da es sich um Ihre eigene 77 00:05:48,580 --> 00:05:53,710 Requisite für Ihre eigene Komponente handelt. Ich habe einen Zeiger auf den Handler zum Abbrechen der Zieladdition 78 00:05:54,000 --> 00:05:59,480 an onCancel weitergeleitet, und jetzt können wir dies innerhalb der Zieleingabe tun Bei Drücken dieser Taste onCancel auslösen. 79 00:05:59,500 --> 00:06:04,990 Also fügen wir hier onPress hinzu und wollen Requisiten auslösen. onCancel hier, also die 80 00:06:04,990 --> 00:06:12,690 Funktion, die wir auf unserer onCancel-Requisite erhalten. Damit sollte die Schaltfläche Abbrechen funktionieren, ja 81 00:06:12,770 --> 00:06:14,260 funktioniert einwandfrei. 82 00:06:14,510 --> 00:06:17,830 Jetzt sollte es natürlich auch unter Android funktionieren, 83 00:06:17,900 --> 00:06:19,310 aber um 84 00:06:19,310 --> 00:06:22,930 es zu testen, schließen wir es wie immer, schließen 85 00:06:22,940 --> 00:06:31,340 es neu und starten danach, ob das Löschen der Eingabe funktioniert. Wenn ich hier React Native eingebe oder lerne, klicke auf Hinzufügen, ja, das 86 00:06:31,340 --> 00:06:33,330 ist leer und Abbrechen funktioniert auch. 87 00:06:33,350 --> 00:06:38,300 In Bezug auf das Styling hier auf Android wäre es schön, einen gewissen Abstand zwischen 88 00:06:38,390 --> 00:06:43,150 den Tasten zu haben oder tatsächlich auf beiden Plattformen, vielleicht haben diese Tasten nebeneinander.