1
00:00:02,270 --> 00:00:03,610
Per realizzare i nostri obiettivi.

2
00:00:03,680 --> 00:00:08,060
Aggiungerò un nuovo componente nella cartella dei componenti e lo manterremo gestibile.

3
00:00:08,150 --> 00:00:11,060
In realtà creerò una nuova sottocartella per ogni componente.

4
00:00:11,420 --> 00:00:17,240
Questo non è un must, ma personalmente mi piace farlo perché posso trovare rapidamente tutti i miei componenti.

5
00:00:17,630 --> 00:00:20,820
Ovviamente, ora è necessario regolare l'importazione qui in ascesso.

6
00:00:21,110 --> 00:00:23,780
La mia idea lo ha fatto automaticamente nel caso in cui non fosse successo.

7
00:00:23,990 --> 00:00:28,090
Assicurati di regolare l'importazione dell'elenco obiettivi in modo che rifletta in U.

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

9
00:00:28,940 --> 00:00:29,360
Ho aggiunto.

10
00:00:30,100 --> 00:00:35,720
E poi aggiungerà un nuovo componente obiettivo qui nella cartella componenti e anche lì.

11
00:00:35,780 --> 00:00:38,990
Aggiungi un nuovo file jazz obiettivo e un nuovo obiettivo.

12
00:00:39,260 --> 00:00:40,310
Vedici come autunno.

13
00:00:40,430 --> 00:00:45,830
Se vuoi applicare un po 'di styling ora in un nuovo file gold jazz, dobbiamo prima di tutto importare reazioni

14
00:00:45,830 --> 00:00:46,580
da reazioni.

15
00:00:46,700 --> 00:00:47,870
Devi sempre farlo.

16
00:00:47,960 --> 00:00:54,770
Altrimenti non puoi usare J come X in quel file perché tieni presente J come exis tradotto per reagire a create

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

18
00:00:56,060 --> 00:00:59,810
E poi qui ho il mio nuovo componente obiettivo qui.

19
00:01:00,110 --> 00:01:02,730
Potremmo accettare Propp spot fintanto che non ne avremo bisogno.

20
00:01:02,750 --> 00:01:03,620
Non dobbiamo.

21
00:01:04,310 --> 00:01:06,650
E poi esporto un nuovo obiettivo.

22
00:01:07,920 --> 00:01:13,580
Ora, in Abcess, voglio raggiungere un nuovo obiettivo, quindi importeremo nuovo oro.

23
00:01:13,920 --> 00:01:18,390
Ancora una volta, il nome qui dipende da te, ma dovrebbe iniziare con un carattere iniziale maiuscolo.

24
00:01:19,070 --> 00:01:20,670
E lo importa dai componenti.

25
00:01:20,820 --> 00:01:21,450
Nuovo obiettivo

26
00:01:21,600 --> 00:01:22,200
Nuovo obiettivo

27
00:01:23,110 --> 00:01:27,640
E quindi qui possiamo renderizzare come sopra la nostra lista di obiettivi, diciamo così.

28
00:01:28,390 --> 00:01:34,930
No, questo non funzionerebbe perché il nuovo obiettivo non è ancora un componente di reazione valido perché è una funzione in questo momento, ma

29
00:01:34,930 --> 00:01:39,940
non è una funzione che funziona come componente di reazione perché non sta facendo una cosa cruciale.

30
00:01:40,510 --> 00:01:41,920
Non sta tornando alla sua X.

31
00:01:42,130 --> 00:01:42,930
Quindi torniamo.

32
00:01:42,940 --> 00:01:48,580
Sono J is X qua e là per mantenere le cose semplici, tutto in un forum.

33
00:01:49,180 --> 00:01:51,640
E in quel forum aggiungerò un campo di input.

34
00:01:53,550 --> 00:01:57,220
Digita il testo con elemento a chiusura automatica in HGL normale.

35
00:01:57,260 --> 00:01:59,820
Non è necessario chiudersi automaticamente in J is X.

36
00:01:59,850 --> 00:02:01,920
Deve essere autochiudente.

37
00:02:02,670 --> 00:02:05,340
E poi un pulsante che è di tipo submit.

38
00:02:06,350 --> 00:02:12,590
Dove dico a Gohl, un modulo molto semplice, e se ora lo mettiamo al sicuro, dovresti vederlo qui.

39
00:02:13,130 --> 00:02:19,700
Ora aggiungiamo un po 'di stile per rendere questo aspetto un po' più bello per papà e una classe per formare un nuovo trattino

40
00:02:19,700 --> 00:02:20,060
d'oro.

41
00:02:20,750 --> 00:02:26,780
E importerò il nuovo gold come file nel nuovo file JavaScript gold.

42
00:02:27,470 --> 00:02:32,270
E poi qui sulla nuova classe d'oro, che viene aggiunta nel modulo tutto a.

43
00:02:33,860 --> 00:02:38,420
Un margine di due REM in tutte le direzioni e riga di testo.

44
00:02:43,600 --> 00:02:44,950
In modo che questo appaia un po 'più bello.

45
00:02:46,620 --> 00:02:48,550
E ora potremmo anche modellare l'input del pulsante.

46
00:02:48,580 --> 00:02:50,110
Ma non voglio spendere troppo tempo su questo.

47
00:02:50,200 --> 00:02:52,540
Quindi lo lasceremo com'è, però, proprio ora.

48
00:02:52,540 --> 00:02:57,160
Quando fai clic sul pulsante, a proposito, questa pagina verrà ricaricata perché in questo momento verrà avviata

49
00:02:57,160 --> 00:02:58,600
la funzionalità predefinita del browser.

50
00:02:58,810 --> 00:03:03,460
Ciò significa che quando si fa clic su un tipo di pulsante di invio in un forum, viene inviata una richiesta al server

51
00:03:03,490 --> 00:03:04,720
che viene pubblicato in questa pagina.

52
00:03:04,890 --> 00:03:09,940
Non è il comportamento che vogliamo qui, però, perché qui non voglio inviare una richiesta a nessun

53
00:03:09,940 --> 00:03:12,850
server perché non stiamo facendo nulla sul lato server.

54
00:03:13,240 --> 00:03:18,520
Invece, voglio gestire quel clic con JavaScript e questa è la prima cosa che farò qui.

55
00:03:18,550 --> 00:03:22,360
Vediamo come possiamo gestire gli eventi, perché finora non l'abbiamo fatto.

56
00:03:23,290 --> 00:03:27,730
Voglio gestire l'evento di presentazione di questo forum qui e reagire lo rende semplice.

57
00:03:28,150 --> 00:03:34,300
Possiamo aggiungere listener di eventi a qualsiasi elemento, non solo al forum, ma a qualsiasi elemento aggiungendo

58
00:03:34,630 --> 00:03:35,590
in minuscolo.

59
00:03:35,770 --> 00:03:36,880
E poi il nome dell'evento.

60
00:03:37,030 --> 00:03:39,520
No, non tutti gli eventi sono supportati su ogni elemento.

61
00:03:39,730 --> 00:03:42,820
Ma qui hai l'HD predefinito, tutti gli elementi disponibili.

62
00:03:43,000 --> 00:03:48,400
Ad esempio, in un elemento del forum in cui devi inviare l'evento, invia su un pulsante.

63
00:03:48,400 --> 00:03:49,840
Hai anche un clic.

64
00:03:50,080 --> 00:03:54,190
Ma poiché è un pulsante in un forum, è meglio gestirlo sul forum stesso.

65
00:03:55,240 --> 00:04:00,160
Ora, cosa passi come valore a Enns up Mido come valore?

66
00:04:00,190 --> 00:04:06,010
Devi passare una funzione che dovrebbe essere attivata quando si verifica questo evento.

67
00:04:06,100 --> 00:04:08,020
Quindi un puntatore a una funzione.

68
00:04:08,740 --> 00:04:12,940
Potresti farlo quest'anno con parentesi graffe e poi una funzione in linea anonima.

69
00:04:13,510 --> 00:04:14,920
Ma non mi piace troppo.

70
00:04:14,940 --> 00:04:16,870
Invece, creerò una nuova funzione qui.

71
00:04:17,170 --> 00:04:20,470
E in JavaScript puoi creare funzioni e funzioni.

72
00:04:20,770 --> 00:04:25,780
Quindi, invece della nuova funzione obiettivo, che è ancora, alla fine posso creare una nuova funzione.

73
00:04:26,380 --> 00:04:27,670
Creerò il mio.

74
00:04:28,680 --> 00:04:32,040
A nome del gestore del goal la nomina dipende da te.

75
00:04:32,070 --> 00:04:38,130
Ma mi piaceva il suo nome di avere Handler alla fine del mio nome funk.

76
00:04:38,400 --> 00:04:41,640
Se è una funzione che viene attivata su qualche evento.

77
00:04:43,270 --> 00:04:48,160
Quindi questa è una funzione in questo caso, userò di nuovo una funzione freccia, che non

78
00:04:48,160 --> 00:04:54,430
è un must, ma userò solo le funzioni freccia qui e Enns up Mitt ora può puntare su AD Gohl Handler.

79
00:04:54,940 --> 00:04:57,550
Non eseguirlo qui, quindi non aggiungere parentesi.

80
00:04:57,790 --> 00:05:04,330
Invece, vuoi solo puntare sulla funzione in modo che il browser e reagire in uno sforzo comune possano

81
00:05:04,330 --> 00:05:06,010
eseguire disfunzioni per te.

82
00:05:06,220 --> 00:05:07,810
Quando si verifica l'evento di invio?

83
00:05:08,950 --> 00:05:16,390
Ora questa funzione otterrà un oggetto evento, un parametro evento passato automaticamente da reazioni e quindi, ad esempio, possiamo chiamare

84
00:05:16,390 --> 00:05:23,410
prevent default, il che impedisce al browser predefinito di inviare una richiesta a qualche back-end, cosa che non dovrebbe

85
00:05:23,440 --> 00:05:28,060
fare qui perché noi non lo gestiamo sul lato server qui.

86
00:05:28,930 --> 00:05:31,990
Il nostro server serve solo quel singolo file HMO indice.

87
00:05:31,990 --> 00:05:35,140
Non ha alcuna logica per gestire alcun invio.

88
00:05:35,740 --> 00:05:39,650
Invece, voglio gestirlo qui in JavaScript sul front-end.

89
00:05:39,910 --> 00:05:46,780
Nella mia applicazione REACT e per il momento ignorerò ciò che l'utente ha inserito qui e

90
00:05:46,900 --> 00:05:49,210
creerò semplicemente un obiettivo fittizio.

91
00:05:49,560 --> 00:05:57,010
E voglio passare quell'obiettivo fittizio all'app G. S. e aggiungilo al mio core Scholes qui in modo che venga

92
00:05:57,010 --> 00:05:57,670
visualizzato qui.

93
00:05:58,270 --> 00:05:59,510
Ora, passo dopo passo.

94
00:06:00,410 --> 00:06:02,690
Naturalmente possiamo creare un nuovo obiettivo Dharmic.

95
00:06:03,780 --> 00:06:05,130
In quell'articolo, Hannover.

96
00:06:06,780 --> 00:06:14,020
Aggiungendo qui una nuova costante obiettivo, che è un oggetto JavaScript, l'idea qui potrebbe essere un numero casuale.

97
00:06:14,060 --> 00:06:15,270
Con il casuale.

98
00:06:15,600 --> 00:06:20,430
Questo, ovviamente, non è davvero un I. unico. D. , ma è abbastanza buono e lo convertirò in una stringa.

99
00:06:21,360 --> 00:06:23,370
È abbastanza buono per la nostra applicazione demo qui.

100
00:06:23,370 --> 00:06:23,730
Intendo.

101
00:06:24,180 --> 00:06:27,800
E poi il testo qui in seguito sarà l'utente di testo inserito qui.

102
00:06:28,110 --> 00:06:30,090
Per ora, solo un po 'di testo fittizio.

103
00:06:30,300 --> 00:06:31,290
Il mio nuovo obiettivo

104
00:06:32,540 --> 00:06:34,040
Quindi ora abbiamo il nuovo obiettivo qui.

105
00:06:34,400 --> 00:06:39,980
E, naturalmente, possiamo console bloccati per vedere che tutto fino a questo punto funziona.

106
00:06:40,430 --> 00:06:41,480
Quindi se lo salviamo.

107
00:06:42,470 --> 00:06:43,610
Vediamo il nostro modulo qui.

108
00:06:44,030 --> 00:06:46,610
E se fai clic su Aggiungi obiettivo, la pagina non verrà ricaricata.

109
00:06:46,940 --> 00:06:48,770
Ma invece vediamo qui l'obiettivo del francobollo.

110
00:06:49,120 --> 00:06:50,840
Potrebbe creare, ovviamente, più obiettivi.

111
00:06:51,080 --> 00:06:53,660
Ma al momento, non sono stati aggiunti a questo elenco.

112
00:06:54,560 --> 00:07:01,100
Per aggiungerlo all'elenco, ora è necessario estrarre tale obiettivo dal nuovo componente obiettivo al componente app.

113
00:07:01,550 --> 00:07:05,120
Ora, prima di imparare, possiamo passare il nostro giro di oggetti di scena.

114
00:07:05,270 --> 00:07:08,180
Ma era dall'app all'elenco degli obiettivi.

115
00:07:08,510 --> 00:07:12,530
Quindi a un componente di livello inferiore, un componente che include un'app.

116
00:07:13,010 --> 00:07:14,510
Ora è l'altra direzione.

117
00:07:14,810 --> 00:07:18,500
Vogliamo passare i dati dal nuovo obiettivo al componente principale.

118
00:07:18,590 --> 00:07:21,110
Quindi il componente che include il nuovo componente obiettivo.

119
00:07:21,560 --> 00:07:22,400
Come funziona?