1
00:00:02,270 --> 00:00:03,610
Para dar salida a nuestros propios objetivos.

2
00:00:03,680 --> 00:00:08,060
Agregaré un nuevo componente en la carpeta de componentes y lo mantendré manejable.

3
00:00:08,150 --> 00:00:11,060
De hecho, crearé una nueva subcarpeta para cada componente.

4
00:00:11,420 --> 00:00:17,240
Esto no es obligatorio, pero personalmente me gusta hacerlo porque puedo encontrar rápidamente todos mis componentes.

5
00:00:17,630 --> 00:00:20,820
Por supuesto, ahora necesita ajustar su importación aquí en un absceso.

6
00:00:21,110 --> 00:00:23,780
Mi idea lo hizo automáticamente en caso de que no sucediera.

7
00:00:23,990 --> 00:00:28,090
Asegúrese de ajustar la importación de su lista de objetivos para reflejar eso en U.

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

9
00:00:28,940 --> 00:00:29,360
Yo añadí.

10
00:00:30,100 --> 00:00:35,720
Y luego agregará un nuevo componente objetivo aquí en la carpeta de componentes también allí.

11
00:00:35,780 --> 00:00:38,990
Agregue un nuevo archivo de jazz objetivo y un nuevo objetivo.

12
00:00:39,260 --> 00:00:40,310
Véanos como otoño.

13
00:00:40,430 --> 00:00:45,830
Si desea aplicar un poco de estilo ahora en un nuevo archivo gold jazz, antes que nada debemos importar reaccionar

14
00:00:45,830 --> 00:00:46,580
desde reaccionar.

15
00:00:46,700 --> 00:00:47,870
Siempre necesitas hacer eso.

16
00:00:47,960 --> 00:00:54,770
De lo contrario, no puede usar J como X en ese archivo porque tenga en cuenta J como exis traducido para reaccionar crear

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

18
00:00:56,060 --> 00:00:59,810
Y luego aquí tengo mi nuevo componente objetivo aquí.

19
00:01:00,110 --> 00:01:02,730
Podríamos aceptar el lugar de Propp siempre que no los necesitemos.

20
00:01:02,750 --> 00:01:03,620
No tenemos que hacerlo

21
00:01:04,310 --> 00:01:06,650
Y luego exporto nuevo objetivo.

22
00:01:07,920 --> 00:01:13,580
Ahora, en Abcess, quiero representar un nuevo objetivo, así que importaremos oro nuevo.

23
00:01:13,920 --> 00:01:18,390
Una vez más, el nombre aquí depende de usted, pero debe comenzar con un carácter inicial mayúscula.

24
00:01:19,070 --> 00:01:20,670
E importo esto de los componentes.

25
00:01:20,820 --> 00:01:21,450
Nuevo gol.

26
00:01:21,600 --> 00:01:22,200
Nuevo gol.

27
00:01:23,110 --> 00:01:27,640
Y luego aquí podemos renderizar como arriba de nuestra lista de objetivos, digamos así.

28
00:01:28,390 --> 00:01:34,930
No, esto no funcionaría porque el nuevo objetivo aún no es un componente de reacción válido porque es una función en este momento, pero

29
00:01:34,930 --> 00:01:39,940
no es una función que funcione como un componente de reacción porque no está haciendo una cosa crucial.

30
00:01:40,510 --> 00:01:41,920
No está volviendo a su X.

31
00:01:42,130 --> 00:01:42,930
Entonces volvamos.

32
00:01:42,940 --> 00:01:48,580
Soy J es X aquí y allá para mantener las cosas simples, todo en un foro.

33
00:01:49,180 --> 00:01:51,640
Y en ese foro agregaré un campo de entrada.

34
00:01:53,550 --> 00:01:57,220
Escriba el elemento de cierre automático de texto en HGL normal.

35
00:01:57,260 --> 00:01:59,820
Esto no tiene que ser de cierre automático en J es X.

36
00:01:59,850 --> 00:02:01,920
Tiene que ser de cierre automático.

37
00:02:02,670 --> 00:02:05,340
Y luego un botón que es de tipo enviar.

38
00:02:06,350 --> 00:02:12,590
Donde digo en Gohl, una forma muy simple, y si ahora estamos a salvo, debería verlo aquí.

39
00:02:13,130 --> 00:02:19,700
Ahora agreguemos un poco de estilo para que se vea un poco más bonito para daddle y una clase para formar un nuevo guión

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

41
00:02:20,750 --> 00:02:26,780
Y voy a importar el nuevo oro ver como un archivo en el nuevo archivo JavaScript de oro.

42
00:02:27,470 --> 00:02:32,270
Y luego aquí en la nueva clase de oro, que se agrega en el formulario todo en.

43
00:02:33,860 --> 00:02:38,420
Un margen de dos REM en todas las direcciones y líneas de texto.

44
00:02:43,600 --> 00:02:44,950
Para que esto se vea un poco mejor.

45
00:02:46,620 --> 00:02:48,550
Y ahora también podríamos diseñar la entrada del botón.

46
00:02:48,580 --> 00:02:50,110
Pero no quiero pasar mucho tiempo en eso.

47
00:02:50,200 --> 00:02:52,540
Sin embargo, lo dejaremos como está, ahora mismo.

48
00:02:52,540 --> 00:02:57,160
Cuando haces clic en el botón, por cierto, esta página se volverá a cargar porque en este momento se activará

49
00:02:57,160 --> 00:02:58,600
la funcionalidad predeterminada del navegador.

50
00:02:58,810 --> 00:03:03,460
Es decir, cuando se hace clic en un botón de tipo enviar en un foro, se envía una solicitud al servidor que

51
00:03:03,490 --> 00:03:04,720
se sirve en esta página.

52
00:03:04,890 --> 00:03:09,940
Sin embargo, no es el comportamiento que queremos aquí, porque aquí no quiero enviar una solicitud a ningún servidor

53
00:03:09,940 --> 00:03:12,850
porque no estamos haciendo nada en el lado del servidor.

54
00:03:13,240 --> 00:03:18,520
En cambio, quiero manejar ese clic con JavaScript y eso es lo primero que haré aquí.

55
00:03:18,550 --> 00:03:22,360
Veamos cómo podemos manejar los eventos, porque hasta ahora no lo hemos hecho.

56
00:03:23,290 --> 00:03:27,730
Quiero manejar el evento de envío de este foro aquí y reaccionar lo hace simple.

57
00:03:28,150 --> 00:03:34,300
Podemos agregar oyentes de eventos a cualquier elemento, no solo al foro, sino a cualquier elemento agregando

58
00:03:34,630 --> 00:03:35,590
minúsculas en.

59
00:03:35,770 --> 00:03:36,880
Y luego el nombre del evento.

60
00:03:37,030 --> 00:03:39,520
No, no todos los eventos son compatibles con todos los elementos.

61
00:03:39,730 --> 00:03:42,820
Pero aquí tienes el HD por defecto, todos los elementos disponibles.

62
00:03:43,000 --> 00:03:48,400
Entonces, por ejemplo, en un elemento del foro en el que debe enviar un evento, enviar en un botón.

63
00:03:48,400 --> 00:03:49,840
También tienes en clic.

64
00:03:50,080 --> 00:03:54,190
Pero como es un botón en un foro, es mejor manejarlo en el foro mismo.

65
00:03:55,240 --> 00:04:00,160
Ahora, ¿qué pasas como valor a Enns up Mido como valor?

66
00:04:00,190 --> 00:04:06,010
Debe pasar una función que debe activarse cuando ocurre este evento.

67
00:04:06,100 --> 00:04:08,020
Entonces, un puntero a una función.

68
00:04:08,740 --> 00:04:12,940
Podrías hacerlo este año con llaves y luego una función anónima en línea.

69
00:04:13,510 --> 00:04:14,920
Pero eso no me gusta demasiado.

70
00:04:14,940 --> 00:04:16,870
En cambio, crearé una nueva función aquí.

71
00:04:17,170 --> 00:04:20,470
Y en JavaScript puede crear funciones y funciones.

72
00:04:20,770 --> 00:04:25,780
Entonces, en lugar de la nueva función de objetivo, que todavía es, al final puedo crear una nueva función.

73
00:04:26,380 --> 00:04:27,670
Voy a crear mi

74
00:04:28,680 --> 00:04:32,040
En el controlador de objetivos, la asignación de notas depende de usted.

75
00:04:32,070 --> 00:04:38,130
Pero me gustó su nombre de tener a Handler al final del nombre de mi funks.

76
00:04:38,400 --> 00:04:41,640
Si es una función que se activa en algún evento.

77
00:04:43,270 --> 00:04:48,160
Entonces, esta es una función en este caso, volveré a usar una función de flecha, que

78
00:04:48,160 --> 00:04:54,430
no es imprescindible, pero usaré solo funciones de flecha aquí y Enns up Mitt ahora puede apuntar a AD Gohl Handler.

79
00:04:54,940 --> 00:04:57,550
No lo ejecute aquí, así que no agregue paréntesis.

80
00:04:57,790 --> 00:05:04,330
En cambio, solo desea señalar la función para que el navegador y reaccionar en un esfuerzo común pueda ejecutar

81
00:05:04,330 --> 00:05:06,010
la disfunción por usted.

82
00:05:06,220 --> 00:05:07,810
¿Cuándo se produce el evento de envío?

83
00:05:08,950 --> 00:05:16,390
Ahora, esta función obtendrá un objeto de evento, un parámetro de evento que se pasa automáticamente al reaccionar y luego, por ejemplo, podemos llamar

84
00:05:16,390 --> 00:05:23,410
a Prevenir por defecto, lo que evita que el navegador por defecto envíe una solicitud a algún back-end, lo que no debería

85
00:05:23,440 --> 00:05:28,060
hacer aquí porque No está manejando esto en el lado del servidor aquí.

86
00:05:28,930 --> 00:05:31,990
Nuestro servidor solo sirve ese archivo HMO de índice único.

87
00:05:31,990 --> 00:05:35,140
No tiene ninguna lógica para manejar ningún envío.

88
00:05:35,740 --> 00:05:39,650
En cambio, quiero manejarlo aquí en JavaScript en la parte frontal.

89
00:05:39,910 --> 00:05:46,780
En mi aplicación REACT y por el momento ignoraré lo que el usuario ingresó aquí y

90
00:05:46,900 --> 00:05:49,210
simplemente crearé un objetivo ficticio.

91
00:05:49,560 --> 00:05:57,010
Y quiero pasar esa meta ficticia a la aplicación G. S. y agregarlo a mi Scholes principal aquí para que luego se

92
00:05:57,010 --> 00:05:57,670
muestre aquí.

93
00:05:58,270 --> 00:05:59,510
Ahora paso a paso.

94
00:06:00,410 --> 00:06:02,690
Podemos crear una nueva meta dharmica, por supuesto.

95
00:06:03,780 --> 00:06:05,130
En ese artículo, Hannover.

96
00:06:06,780 --> 00:06:13,620
Al agregar una nueva constante de objetivo aquí, que es un objeto JavaScript, la idea aquí podría ser un número

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

98
00:06:14,060 --> 00:06:15,270
Con mothe al azar.

99
00:06:15,600 --> 00:06:20,430
Esto, por supuesto, no es realmente un yo único. RE. , pero es lo suficientemente bueno y lo convertiré en una cadena.

100
00:06:21,360 --> 00:06:23,370
Es lo suficientemente bueno para nuestra aplicación de demostración aquí.

101
00:06:23,370 --> 00:06:23,730
Quiero decir.

102
00:06:24,180 --> 00:06:27,800
Y luego el texto aquí más tarde será el texto que el usuario ingresó aquí.

103
00:06:28,110 --> 00:06:30,090
Por ahora, solo un texto falso.

104
00:06:30,300 --> 00:06:31,290
Mi nuevo objetivo

105
00:06:32,540 --> 00:06:34,040
Así que ahora tenemos el nuevo objetivo aquí.

106
00:06:34,400 --> 00:06:39,980
Y, por supuesto, podemos consolar bloqueado para ver que todo funciona hasta este punto.

107
00:06:40,430 --> 00:06:41,480
Entonces si guardamos eso.

108
00:06:42,470 --> 00:06:43,610
Vemos nuestro formulario aquí.

109
00:06:44,030 --> 00:06:46,610
Y si hace clic en Agregar objetivo, la página no se volverá a cargar.

110
00:06:46,940 --> 00:06:48,770
Pero en cambio vemos el objetivo del sello aquí.

111
00:06:49,120 --> 00:06:50,840
Podría crear, por supuesto, múltiples objetivos.

112
00:06:51,080 --> 00:06:53,660
Pero por el momento, no se agregan a esta lista.

113
00:06:54,560 --> 00:07:01,100
Para agregar a la lista, ahora necesitamos sacar ese objetivo del nuevo componente del objetivo al componente de la aplicación.

114
00:07:01,550 --> 00:07:05,120
Ahora, antes de aprender, podemos pasar el estado de nuestra ronda de accesorios.

115
00:07:05,270 --> 00:07:08,180
Pero eso fue de la aplicación a la lista de objetivos.

116
00:07:08,510 --> 00:07:12,530
Entonces, para un componente de nivel inferior, un componente que incluye una aplicación.

117
00:07:13,010 --> 00:07:14,510
Ahora es la otra dirección.

118
00:07:14,810 --> 00:07:18,500
Queremos pasar datos del nuevo objetivo al componente principal.

119
00:07:18,590 --> 00:07:21,110
Entonces, el componente que incluye el nuevo componente objetivo.

120
00:07:21,560 --> 00:07:22,400
¿Como funciona esto?