1
00:00:02,270 --> 00:00:03,610
Unsere eigenen Ziele ausgeben.

2
00:00:03,680 --> 00:00:08,060
Ich werde eine neue Komponente in den Komponentenordner einfügen und sie überschaubar halten.

3
00:00:08,150 --> 00:00:11,060
Ich werde tatsächlich einen neuen Unterordner für jede Komponente erstellen.

4
00:00:11,420 --> 00:00:17,240
Dies ist kein Muss, aber ich persönlich mache das gerne, weil ich dann schnell alle meine Komponenten finden kann.

5
00:00:17,630 --> 00:00:20,820
Natürlich müssen Sie jetzt Ihren Import hier im Abzess anpassen.

6
00:00:21,110 --> 00:00:23,780
Meine Idee hat es automatisch gemacht, falls es nicht passiert ist.

7
00:00:23,990 --> 00:00:28,090
Stellen Sie sicher, dass Sie den Import Ihrer Zielliste so anpassen, dass er dem in U entspricht.

8
00:00:28,190 --> 00:00:28,580
Mappe.

9
00:00:28,940 --> 00:00:29,360
Ich fügte hinzu.

10
00:00:30,100 --> 00:00:35,720
Und dann wird hier im Komponentenordner auch dort eine neue Zielkomponente hinzugefügt.

11
00:00:35,780 --> 00:00:38,990
Fügen Sie eine neue Ziel-Jazz-Datei und ein neues Ziel hinzu.

12
00:00:39,260 --> 00:00:40,310
Sehen Sie uns als Herbst.

13
00:00:40,430 --> 00:00:45,830
Wenn Sie jetzt ein Styling in einer neuen Gold-Jazz-Datei anwenden möchten, müssen Sie zunächst React from

14
00:00:45,830 --> 00:00:46,580
React importieren.

15
00:00:46,700 --> 00:00:47,870
Das müssen Sie immer tun.

16
00:00:47,960 --> 00:00:54,770
Andernfalls können Sie J nicht als X in dieser Datei verwenden, da J als exis übersetzt wird, um auf das Erstellungselement zu

17
00:00:54,800 --> 00:00:55,280
reagieren.

18
00:00:56,060 --> 00:00:59,810
Und dann habe ich hier meine neue Zielkomponente.

19
00:01:00,110 --> 00:01:02,730
Wir könnten Propp Spot akzeptieren, solange wir sie nicht brauchen.

20
00:01:02,750 --> 00:01:03,620
Wir müssen nicht.

21
00:01:04,310 --> 00:01:06,650
Und dann exportiere ich neues Ziel.

22
00:01:07,920 --> 00:01:13,580
Jetzt möchte ich in Abcess ein neues Ziel festlegen, damit wir neues Gold importieren.

23
00:01:13,920 --> 00:01:18,390
Auch hier liegt der Name bei Ihnen, aber er sollte mit einem Großbuchstaben beginnen.

24
00:01:19,070 --> 00:01:20,670
Und ich importiere dies von Komponenten.

25
00:01:20,820 --> 00:01:21,450
Neues Ziel.

26
00:01:21,600 --> 00:01:22,200
Neues Ziel.

27
00:01:23,110 --> 00:01:27,640
Und dann können wir hier wie oben auf unserer Zielliste rendern, sagen wir mal so.

28
00:01:28,390 --> 00:01:34,930
Nein, dies würde nicht funktionieren, da das neue Ziel noch keine gültige Reaktionskomponente ist, da es sich derzeit um eine Funktion handelt. Es

29
00:01:34,930 --> 00:01:39,940
handelt sich jedoch nicht um eine Funktion, die als Reaktionskomponente fungiert, da sie keine entscheidende Funktion erfüllt.

30
00:01:40,510 --> 00:01:41,920
Es kehrt nicht zu seinem X zurück.

31
00:01:42,130 --> 00:01:42,930
Also lasst uns zurückkehren.

32
00:01:42,940 --> 00:01:48,580
Ich bin J ist X hier und da, um die Dinge einfach zu halten, alles in einem Forum.

33
00:01:49,180 --> 00:01:51,640
Und in diesem Forum werde ich ein Eingabefeld hinzufügen.

34
00:01:53,550 --> 00:01:57,220
Geben Sie das selbstschließende Textelement in die reguläre HGL ein.

35
00:01:57,260 --> 00:01:59,820
Dies muss in J is X nicht selbstschließend sein.

36
00:01:59,850 --> 00:02:01,920
Es muss sich selbst schließen.

37
00:02:02,670 --> 00:02:05,340
Und dann eine Schaltfläche vom Typ Senden.

38
00:02:06,350 --> 00:02:12,590
Wo ich bei Gohl sage, eine sehr einfache Form, und wenn wir das jetzt sichern, sollten Sie es hier sehen.

39
00:02:13,130 --> 00:02:19,700
Fügen wir nun etwas Styling hinzu, um diesen Look für Daddle etwas schöner zu machen, und eine Klasse, um neues Dash-Gold zu

40
00:02:19,700 --> 00:02:20,060
bilden.

41
00:02:20,750 --> 00:02:26,780
Und ich werde das neue Gold als Datei in die neue Gold-JavaScript-Datei importieren.

42
00:02:27,470 --> 00:02:32,270
Und dann hier die neue Goldklasse, die auf dem Formular all at hinzugefügt wird.

43
00:02:33,860 --> 00:02:38,420
Ein Rand von zwei REM in alle Richtungen und Textzeile.

44
00:02:43,600 --> 00:02:44,950
Damit das ein bisschen schöner aussieht.

45
00:02:46,620 --> 00:02:48,550
Und jetzt können wir auch die Eingabe der Schaltfläche stylen.

46
00:02:48,580 --> 00:02:50,110
Aber ich möchte nicht zu viel Zeit damit verbringen.

47
00:02:50,200 --> 00:02:52,540
Also lassen wir es jetzt so wie es ist.

48
00:02:52,540 --> 00:02:57,160
Wenn Sie auf die Schaltfläche klicken, wird diese Seite übrigens neu geladen, da im Moment

49
00:02:57,160 --> 00:02:58,600
die Standardbrowserfunktionalität aktiviert wird.

50
00:02:58,810 --> 00:03:03,460
Das heißt, wenn in einem Forum auf eine Schaltfläche vom Typ Senden geklickt wird, wird eine Anfrage an den Server gesendet,

51
00:03:03,490 --> 00:03:04,720
der dieser Seite bereitgestellt wird.

52
00:03:04,890 --> 00:03:09,940
Es ist jedoch nicht das Verhalten, das wir hier wollen, denn hier möchte ich keine Anfrage an einen

53
00:03:09,940 --> 00:03:12,850
Server senden, weil wir auf der Serverseite nichts tun.

54
00:03:13,240 --> 00:03:18,520
Stattdessen möchte ich diesen Klick mit JavaScript behandeln und das ist das erste, was ich hier tun werde.

55
00:03:18,550 --> 00:03:22,360
Mal sehen, wie wir mit Ereignissen umgehen können, denn das haben wir bisher noch nicht getan.

56
00:03:23,290 --> 00:03:27,730
Ich möchte das Submit-Ereignis dieses Forums hier behandeln und reagieren macht das einfach.

57
00:03:28,150 --> 00:03:34,300
Wir können jedem Element Ereignis-Listener hinzufügen, nicht nur dem Forum, sondern jedem Element, indem wir

58
00:03:34,630 --> 00:03:35,590
Kleinbuchstaben hinzufügen.

59
00:03:35,770 --> 00:03:36,880
Und dann der Name des Ereignisses.

60
00:03:37,030 --> 00:03:39,520
Nein, nicht jedes Ereignis wird für jedes Element unterstützt.

61
00:03:39,730 --> 00:03:42,820
Aber hier hast du ihm die Standard-HD, alle Elemente zur Verfügung.

62
00:03:43,000 --> 00:03:48,400
So müssen Sie beispielsweise in einem Forumelement ein Ereignis über eine Schaltfläche senden.

63
00:03:48,400 --> 00:03:49,840
Sie haben auch auf Klick.

64
00:03:50,080 --> 00:03:54,190
Da es sich jedoch um eine Schaltfläche in einem Forum handelt, ist es besser, sie im Forum selbst zu handhaben.

65
00:03:55,240 --> 00:04:00,160
Was übergeben Sie nun als Wert an Enns up Mido als Wert?

66
00:04:00,190 --> 00:04:06,010
Sie müssen eine Funktion übergeben, die ausgelöst werden soll, wenn dieses Ereignis eintritt.

67
00:04:06,100 --> 00:04:08,020
Also ein Zeiger auf eine Funktion.

68
00:04:08,740 --> 00:04:12,940
Sie könnten dieses Jahr mit geschweiften Klammern und dann einer anonymen Inline-Funktion arbeiten.

69
00:04:13,510 --> 00:04:14,920
Aber das gefällt mir nicht so gut.

70
00:04:14,940 --> 00:04:16,870
Stattdessen werde ich hier eine neue Funktion erstellen.

71
00:04:17,170 --> 00:04:20,470
Und in JavaScript können Sie Funktionen und Funktionen erstellen.

72
00:04:20,770 --> 00:04:25,780
Anstelle der neuen Zielfunktion, die es noch ist, kann ich am Ende eine neue Funktion erstellen.

73
00:04:26,380 --> 00:04:27,670
Ich werde meine erstellen.

74
00:04:28,680 --> 00:04:32,040
Beim Torhandler liegt die Benennung der Notizen bei Ihnen.

75
00:04:32,070 --> 00:04:38,130
Aber ich mochte seine Benennung, Handler am Ende meines Funknamens zu haben.

76
00:04:38,400 --> 00:04:41,640
Wenn es sich um eine Funktion handelt, die bei einem Ereignis ausgelöst wird.

77
00:04:43,270 --> 00:04:48,160
Dies ist also eine Funktion in diesem Fall. Ich werde wieder eine Pfeilfunktion verwenden, was

78
00:04:48,160 --> 00:04:54,430
kein Muss ist, aber ich werde hier nur Pfeilfunktionen verwenden, und Enns up Mitt kann jetzt auf AD Gohl Handler zeigen.

79
00:04:54,940 --> 00:04:57,550
Führen Sie es hier nicht aus, also fügen Sie keine Klammern hinzu.

80
00:04:57,790 --> 00:05:04,330
Stattdessen möchten Sie nur auf die Funktion zeigen, damit der Browser und die gemeinsame Reaktion eine Funktionsstörung

81
00:05:04,330 --> 00:05:06,010
für Sie ausführen können.

82
00:05:06,220 --> 00:05:07,810
Wann tritt das Übermittlungsereignis auf?

83
00:05:08,950 --> 00:05:16,390
Jetzt erhält diese Funktion ein Ereignisobjekt, einen Ereignisparameter, der automatisch durch Reagieren übergeben wird, und dann können wir zum Beispiel verhindern

84
00:05:16,390 --> 00:05:23,410
Standard aufrufen, wodurch verhindert wird, dass der Browser standardmäßig eine Anfrage an ein Back-End sendet, was hier nicht der Fall

85
00:05:23,440 --> 00:05:28,060
sein sollte, weil wir Wir behandeln dies hier nicht auf der Serverseite.

86
00:05:28,930 --> 00:05:31,990
Unser Server bedient nur diese einzelne Index-HMO-Datei.

87
00:05:31,990 --> 00:05:35,140
Es gibt keine Logik für die Bearbeitung von Einsendungen.

88
00:05:35,740 --> 00:05:39,650
Stattdessen möchte ich hier in JavaScript am Frontend damit umgehen.

89
00:05:39,910 --> 00:05:46,780
In meiner REACT-Anwendung werde ich im Moment ignorieren, was der Benutzer hier eingegeben hat, und

90
00:05:46,900 --> 00:05:49,210
stattdessen einfach ein Dummy-Ziel erstellen.

91
00:05:49,560 --> 00:05:57,010
Und ich möchte dieses Dummy-Ziel an App G weitergeben. S. und füge es hier zu meinem Kern Scholes hinzu, damit es dann

92
00:05:57,010 --> 00:05:57,670
hier gerendert wird.

93
00:05:58,270 --> 00:05:59,510
Nun Schritt für Schritt.

94
00:06:00,410 --> 00:06:02,690
Wir können natürlich ein neues dharmisches Ziel schaffen.

95
00:06:03,780 --> 00:06:05,130
In diesem Artikel Hannover.

96
00:06:06,780 --> 00:06:13,620
Durch Hinzufügen einer neuen Zielkonstante, bei der es sich um ein JavaScript-Objekt handelt, könnte die Idee hier eine Zufallszahl

97
00:06:13,620 --> 00:06:14,020
sein.

98
00:06:14,060 --> 00:06:15,270
Mit Mothe zufällig.

99
00:06:15,600 --> 00:06:20,430
Dies ist natürlich kein wirklich einzigartiges Ich. D. D. , aber es ist gut genug und ich werde es in einen String konvertieren.

100
00:06:21,360 --> 00:06:23,370
Es ist gut genug für unsere Demo-Anwendung hier.

101
00:06:23,370 --> 00:06:23,730
Ich meine.

102
00:06:24,180 --> 00:06:27,800
Und dann wird der Text hier später der hier eingegebene Textbenutzer sein.

103
00:06:28,110 --> 00:06:30,090
Im Moment nur ein Dummy-Text.

104
00:06:30,300 --> 00:06:31,290
Mein neues Ziel.

105
00:06:32,540 --> 00:06:34,040
Jetzt haben wir hier das neue Ziel.

106
00:06:34,400 --> 00:06:39,980
Und natürlich können wir die Konsole sperren, um zu sehen, dass bis zu diesem Punkt alles funktioniert.

107
00:06:40,430 --> 00:06:41,480
Also, wenn wir das speichern.

108
00:06:42,470 --> 00:06:43,610
Wir sehen unsere Form hier.

109
00:06:44,030 --> 00:06:46,610
Wenn Sie auf Ziel hinzufügen klicken, wird die Seite nicht neu geladen.

110
00:06:46,940 --> 00:06:48,770
Stattdessen sehen wir hier das Stempelziel.

111
00:06:49,120 --> 00:06:50,840
Könnte natürlich mehrere Ziele schaffen.

112
00:06:51,080 --> 00:06:53,660
Im Moment werden sie jedoch nicht zu dieser Liste hinzugefügt.

113
00:06:54,560 --> 00:07:01,100
Um die Liste zu erweitern, müssen wir dieses Ziel nun aus der neuen Zielkomponente in die App-Komponente übertragen.

114
00:07:01,550 --> 00:07:05,120
Bevor wir lernen, können wir unsere Requisitenrunde bestehen.

115
00:07:05,270 --> 00:07:08,180
Aber das war von der App bis zur Zielliste.

116
00:07:08,510 --> 00:07:12,530
Also zu einer untergeordneten Komponente, einer Komponente, die eine App enthält.

117
00:07:13,010 --> 00:07:14,510
Jetzt ist es die andere Richtung.

118
00:07:14,810 --> 00:07:18,500
Wir möchten Daten vom neuen Ziel an die übergeordnete Komponente übergeben.

119
00:07:18,590 --> 00:07:21,110
Also die Komponente, die die neue Zielkomponente enthält.

120
00:07:21,560 --> 00:07:22,400
Wie funktioniert das?