1
00:00:02,270 --> 00:00:03,610
Wyprowadzać nasze własne cele.

2
00:00:03,680 --> 00:00:08,060
Dodam nowy komponent do folderu komponentów i utrzymam go w zarządzaniu.

3
00:00:08,150 --> 00:00:11,060
Stworzę nowy podfolder dla każdego komponentu.

4
00:00:11,420 --> 00:00:17,240
Nie jest to konieczne, ale osobiście lubię to robić, ponieważ wtedy mogę szybko znaleźć wszystkie moje komponenty.

5
00:00:17,630 --> 00:00:20,820
Oczywiście musisz teraz dostosować import tutaj.

6
00:00:21,110 --> 00:00:23,780
Mój pomysł zrobił to automatycznie na wypadek, gdyby tak się nie stało.

7
00:00:23,990 --> 00:00:28,090
Upewnij się, że dostosujesz import listy celów, aby odzwierciedlić to w U.

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

9
00:00:28,940 --> 00:00:29,360
Dodałem.

10
00:00:30,100 --> 00:00:35,720
A następnie doda nowy komponent celu tutaj również w folderze składników.

11
00:00:35,780 --> 00:00:38,990
Dodaj nowy plik jazzowy do bramki i nowy cel.

12
00:00:39,260 --> 00:00:40,310
Zobacz nas jak jesień.

13
00:00:40,430 --> 00:00:45,830
Jeśli chcesz teraz zastosować stylizację w nowym złotym pliku jazzowym, najpierw musimy zaimportować reakcję z

14
00:00:45,830 --> 00:00:46,580
reakcji.

15
00:00:46,700 --> 00:00:47,870
Zawsze musisz to zrobić.

16
00:00:47,960 --> 00:00:54,770
W przeciwnym razie nie można użyć J jako X w tym pliku, ponieważ należy pamiętać o J jako przetłumaczonym exis, aby zareagować na utworzenie

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

18
00:00:56,060 --> 00:00:59,810
A potem tutaj mam swój nowy element celu.

19
00:01:00,110 --> 00:01:02,730
Możemy zaakceptować miejsce Proppa, o ile ich nie potrzebujemy.

20
00:01:02,750 --> 00:01:03,620
Nie musimy.

21
00:01:04,310 --> 00:01:06,650
A potem eksportuję nowy cel.

22
00:01:07,920 --> 00:01:13,580
Teraz w Abcess chcę oddać nowy cel, więc zaimportujemy nowe złoto.

23
00:01:13,920 --> 00:01:18,390
Ponownie, nazwa tutaj należy do ciebie, ale powinna zaczynać się od dużej postaci startowej.

24
00:01:19,070 --> 00:01:20,670
I importuję to z komponentów.

25
00:01:20,820 --> 00:01:21,450
Nowy cel.

26
00:01:21,600 --> 00:01:22,200
Nowy cel.

27
00:01:23,110 --> 00:01:27,640
I tutaj możemy renderować jak powyżej naszej listy celów, powiedzmy tak.

28
00:01:28,390 --> 00:01:34,930
Nie, to nie zadziałałoby, ponieważ nowy cel nie jest jeszcze ważnym składnikiem reakcji, ponieważ jest to funkcja w tej chwili, ale

29
00:01:34,930 --> 00:01:39,940
nie jest to funkcja, która działa jako składnik reakcji, ponieważ nie robi jednej kluczowej rzeczy.

30
00:01:40,510 --> 00:01:41,920
Nie wraca do swojego X.

31
00:01:42,130 --> 00:01:42,930
Wróćmy więc.

32
00:01:42,940 --> 00:01:48,580
Jestem J, X tu i tam, aby uprościć sprawę, wszystko na forum.

33
00:01:49,180 --> 00:01:51,640
I na tym forum dodam pole wejściowe.

34
00:01:53,550 --> 00:01:57,220
Wpisz tekstowy element samozamykający w zwykłym języku HGL.

35
00:01:57,260 --> 00:01:59,820
To nie musi być samozamykające się w J to X.

36
00:01:59,850 --> 00:02:01,920
To musi być samozamykające.

37
00:02:02,670 --> 00:02:05,340
A następnie przycisk, który jest typu przesłać.

38
00:02:06,350 --> 00:02:12,590
Jak mówię w Gohl, bardzo prosta forma, a jeśli teraz możemy to bezpiecznie, powinieneś ją zobaczyć tutaj.

39
00:02:13,130 --> 00:02:20,060
Dodajmy teraz stylizację, aby wyglądało to nieco ładniej dla daddle i klasa, aby utworzyć nowe złote kreski.

40
00:02:20,750 --> 00:02:26,780
I zaimportuję nowe złoto jako plik do nowego złotego pliku JavaScript.

41
00:02:27,470 --> 00:02:32,270
A tutaj nowa klasa złota, która została dodana do formularza w całości.

42
00:02:33,860 --> 00:02:38,420
Margines dwóch REM we wszystkich kierunkach i wierszu tekstu.

43
00:02:43,600 --> 00:02:44,950
Dzięki temu wygląda to trochę ładniej.

44
00:02:46,620 --> 00:02:48,550
A teraz moglibyśmy również stylizować wejście przycisku.

45
00:02:48,580 --> 00:02:50,110
Ale nie chcę poświęcać temu zbyt wiele czasu.

46
00:02:50,200 --> 00:02:52,540
Ale zostawmy to tak, jak jest teraz.

47
00:02:52,540 --> 00:02:57,160
Nawiasem mówiąc, po kliknięciu przycisku strona zostanie ponownie załadowana, ponieważ teraz uruchomi się

48
00:02:57,160 --> 00:02:58,600
domyślna funkcja przeglądarki.

49
00:02:58,810 --> 00:03:03,460
Oznacza to, że po kliknięciu przycisku „Prześlij typ wyłączony” na forum żądanie jest wysyłane do serwera

50
00:03:03,490 --> 00:03:04,720
obsługiwanego na tej stronie.

51
00:03:04,890 --> 00:03:09,940
Nie jest to jednak zachowanie, którego chcemy tutaj, ponieważ tutaj nie chcę wysyłać żądania do żadnego

52
00:03:09,940 --> 00:03:12,850
serwera, ponieważ nie robimy nic po stronie serwera.

53
00:03:13,240 --> 00:03:18,520
Zamiast tego chcę obsłużyć to kliknięcie za pomocą JavaScript i to jest pierwsza rzecz, którą tutaj zrobię.

54
00:03:18,550 --> 00:03:22,360
Zobaczmy, jak radzimy sobie ze zdarzeniami, ponieważ do tej pory tego nie zrobiliśmy.

55
00:03:23,290 --> 00:03:27,730
Chcę obsłużyć wydarzenie tego forum tutaj i zareagować, to takie proste.

56
00:03:28,150 --> 00:03:34,300
Możemy dodać detektory zdarzeń do dowolnego elementu, nie tylko na forum, ale do dowolnego elementu, dodając małe

57
00:03:34,630 --> 00:03:35,590
litery na.

58
00:03:35,770 --> 00:03:36,880
A potem nazwa wydarzenia.

59
00:03:37,030 --> 00:03:39,520
Nie, nie każde zdarzenie jest obsługiwane w każdym elemencie.

60
00:03:39,730 --> 00:03:42,820
Ale tutaj masz domyślną HD, wszystkie elementy są dostępne.

61
00:03:43,000 --> 00:03:48,400
Na przykład w elemencie forum, w którym musisz przesłać zdarzenie, prześlij przycisk.

62
00:03:48,400 --> 00:03:49,840
Masz również na kliknięcie.

63
00:03:50,080 --> 00:03:54,190
Ale ponieważ jest to przycisk na forum, lepiej jest obsługiwać go na samym forum.

64
00:03:55,240 --> 00:04:00,160
Co teraz przekazujesz jako wartość Enns up Mido jako wartość?

65
00:04:00,190 --> 00:04:06,010
Musisz przekazać funkcję, która powinna zostać uruchomiona, gdy to zdarzenie się wydarzy.

66
00:04:06,100 --> 00:04:08,020
Wskaźnik do funkcji.

67
00:04:08,740 --> 00:04:12,940
Możesz zrobić w tym roku z nawiasami klamrowymi, a następnie anonimową funkcją liniową.

68
00:04:13,510 --> 00:04:14,920
Ale nie lubię tego za bardzo.

69
00:04:14,940 --> 00:04:16,870
Zamiast tego utworzę tutaj nową funkcję.

70
00:04:17,170 --> 00:04:20,470
A w JavaScript możesz tworzyć funkcje i funkcje.

71
00:04:20,770 --> 00:04:25,780
Więc zamiast nowej funkcji celu, którą nadal jest, w końcu mogę utworzyć nową funkcję.

72
00:04:26,380 --> 00:04:27,670
Stworzę moje.

73
00:04:28,680 --> 00:04:32,040
Nazwy notatek dla osoby zajmującej się celami zależą od Ciebie.

74
00:04:32,070 --> 00:04:38,130
Ale podobało mi się jego nazywanie Handlera na końcu mojego funkowego imienia.

75
00:04:38,400 --> 00:04:41,640
Jeśli jest to funkcja uruchamiana po pewnym zdarzeniu.

76
00:04:43,270 --> 00:04:48,160
Jest to więc funkcja w tym przypadku, jeszcze raz użyję funkcji strzałki, co nie

77
00:04:48,160 --> 00:04:54,430
jest koniecznością, ale użyję tutaj tylko funkcji strzałki, a Enns up Mitt może teraz wskazywać na AD Gohl Handler.

78
00:04:54,940 --> 00:04:57,550
Nie wykonuj go tutaj, więc nie dodawaj nawiasów.

79
00:04:57,790 --> 00:05:04,330
Zamiast tego po prostu chcesz wskazać funkcję, aby przeglądarka i zareagować wspólnym wysiłkiem, mogła spowodować

80
00:05:04,330 --> 00:05:06,010
dla ciebie dysfunkcję.

81
00:05:06,220 --> 00:05:07,810
Kiedy nastąpi zdarzenie przesyłania?

82
00:05:08,950 --> 00:05:16,390
Teraz ta funkcja otrzyma obiekt zdarzenia, parametr zdarzenia przekazywany automatycznie przez zareaguj, a następnie na przykład możemy wywołać

83
00:05:16,390 --> 00:05:23,410
funkcję zapobiegania domyślnemu, co zapobiega domyślnemu wysyłaniu przez przeglądarkę żądania do jakiegoś zaplecza, czego nie powinien

84
00:05:23,440 --> 00:05:28,060
tutaj robić, ponieważ tutaj nie obsługuję tego po stronie serwera.

85
00:05:28,930 --> 00:05:31,990
Nasz serwer obsługuje tylko ten pojedynczy plik indeksu HMO.

86
00:05:31,990 --> 00:05:35,140
Nie ma logiki do obsługi żadnych zgłoszeń.

87
00:05:35,740 --> 00:05:39,650
Zamiast tego chcę obsłużyć go tutaj w JavaScript na interfejsie.

88
00:05:39,910 --> 00:05:46,780
W mojej aplikacji REACT i na razie zignoruję to, co wpisał użytkownik, i po

89
00:05:46,900 --> 00:05:49,210
prostu utworzę fałszywy cel.

90
00:05:49,560 --> 00:05:57,010
I chcę przekazać ten fałszywy cel aplikacji G. S. i dodaj go tutaj do mojego podstawowego Scholesa, aby następnie został

91
00:05:57,010 --> 00:05:57,670
tutaj zrenderowany.

92
00:05:58,270 --> 00:05:59,510
Teraz krok po kroku.

93
00:06:00,410 --> 00:06:02,690
Oczywiście możemy stworzyć nowy cel Dharmiczny.

94
00:06:03,780 --> 00:06:05,130
W tym artykule Hanower.

95
00:06:06,780 --> 00:06:14,020
Dodając tutaj nową stałą celu, która jest obiektem JavaScript, pomysłem może być liczba losowa.

96
00:06:14,060 --> 00:06:15,270
Z losowym losowaniem.

97
00:06:15,600 --> 00:06:20,430
To oczywiście nie jest naprawdę wyjątkowe I. RE. , ale jest wystarczająco dobry i przekonwertuję go na ciąg.

98
00:06:21,360 --> 00:06:23,370
Jest wystarczająco dobry dla naszej aplikacji demo tutaj.

99
00:06:23,370 --> 00:06:23,730
Mam na myśli.

100
00:06:24,180 --> 00:06:27,800
A potem tekst tutaj będzie tekstem wprowadzonym tutaj przez użytkownika.

101
00:06:28,110 --> 00:06:30,090
Na razie tylko tekst obojętny.

102
00:06:30,300 --> 00:06:31,290
Mój nowy cel

103
00:06:32,540 --> 00:06:34,040
Teraz mamy tutaj nowy cel.

104
00:06:34,400 --> 00:06:39,980
I oczywiście możemy zablokować konsolę, aby zobaczyć, że wszystko do tej pory działa.

105
00:06:40,430 --> 00:06:41,480
Więc jeśli to uratujemy.

106
00:06:42,470 --> 00:06:43,610
Widzimy tutaj nasz formularz.

107
00:06:44,030 --> 00:06:46,610
A jeśli klikniesz Dodaj cel, strona się nie przeładuje.

108
00:06:46,940 --> 00:06:48,770
Zamiast tego widzimy tutaj cel znaczka.

109
00:06:49,120 --> 00:06:50,840
Mógłby, oczywiście, stworzyć wiele celów.

110
00:06:51,080 --> 00:06:53,660
Ale w tej chwili nie są dodawane do tej listy.

111
00:06:54,560 --> 00:07:01,100
Aby dodać do listy, musimy teraz przenieść ten cel z nowego komponentu celu do komponentu aplikacji.

112
00:07:01,550 --> 00:07:05,120
Teraz, zanim się nauczymy, możemy przekazać stan naszej rundy rekwizytów.

113
00:07:05,270 --> 00:07:08,180
Ale to było od aplikacji do listy celów.

114
00:07:08,510 --> 00:07:12,530
Tak więc do komponentu niższego poziomu, który jest częścią aplikacji.

115
00:07:13,010 --> 00:07:14,510
Teraz jest inny kierunek.

116
00:07:14,810 --> 00:07:18,500
Chcemy przekazać dane z nowego celu do komponentu nadrzędnego.

117
00:07:18,590 --> 00:07:21,110
Więc komponent, który zawiera nowy komponent celu.

118
00:07:21,560 --> 00:07:22,400
Jak to działa?