Para dar salida a nuestros propios objetivos.
Agregaré un nuevo componente en la carpeta de componentes y lo mantendré manejable.
De hecho, crearé una nueva subcarpeta para cada componente.
Esto no es obligatorio, pero personalmente me gusta hacerlo porque puedo encontrar rápidamente todos mis componentes.
Por supuesto, ahora necesita ajustar su importación aquí en un absceso.
Mi idea lo hizo automáticamente en caso de que no sucediera.
Asegúrese de ajustar la importación de su lista de objetivos para reflejar eso en U.
Carpeta.
Yo añadí.
Y luego agregará un nuevo componente objetivo aquí en la carpeta de componentes también allí.
Agregue un nuevo archivo de jazz objetivo y un nuevo objetivo.
Véanos como otoño.
Si desea aplicar un poco de estilo ahora en un nuevo archivo gold jazz, antes que nada debemos importar reaccionar
desde reaccionar.
Siempre necesitas hacer eso.
De lo contrario, no puede usar J como X en ese archivo porque tenga en cuenta J como exis traducido para reaccionar crear
elemento.
Y luego aquí tengo mi nuevo componente objetivo aquí.
Podríamos aceptar el lugar de Propp siempre que no los necesitemos.
No tenemos que hacerlo
Y luego exporto nuevo objetivo.
Ahora, en Abcess, quiero representar un nuevo objetivo, así que importaremos oro nuevo.
Una vez más, el nombre aquí depende de usted, pero debe comenzar con un carácter inicial mayúscula.
E importo esto de los componentes.
Nuevo gol.
Y luego aquí podemos renderizar como arriba de nuestra lista de objetivos, digamos así.
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
no es una función que funcione como un componente de reacción porque no está haciendo una cosa crucial.
No está volviendo a su X.
Entonces volvamos.
Soy J es X aquí y allá para mantener las cosas simples, todo en un foro.
Y en ese foro agregaré un campo de entrada.
Escriba el elemento de cierre automático de texto en HGL normal.
Esto no tiene que ser de cierre automático en J es X.
Tiene que ser de cierre automático.
Y luego un botón que es de tipo enviar.
Donde digo en Gohl, una forma muy simple, y si ahora estamos a salvo, debería verlo aquí.
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
dorado.
Y voy a importar el nuevo oro ver como un archivo en el nuevo archivo JavaScript de oro.
Y luego aquí en la nueva clase de oro, que se agrega en el formulario todo en.
Un margen de dos REM en todas las direcciones y líneas de texto.
Para que esto se vea un poco mejor.
Y ahora también podríamos diseñar la entrada del botón.
Pero no quiero pasar mucho tiempo en eso.
Sin embargo, lo dejaremos como está, ahora mismo.
Cuando haces clic en el botón, por cierto, esta página se volverá a cargar porque en este momento se activará
la funcionalidad predeterminada del navegador.
Es decir, cuando se hace clic en un botón de tipo enviar en un foro, se envía una solicitud al servidor que
se sirve en esta página.
Sin embargo, no es el comportamiento que queremos aquí, porque aquí no quiero enviar una solicitud a ningún servidor
porque no estamos haciendo nada en el lado del servidor.
En cambio, quiero manejar ese clic con JavaScript y eso es lo primero que haré aquí.
Veamos cómo podemos manejar los eventos, porque hasta ahora no lo hemos hecho.
Quiero manejar el evento de envío de este foro aquí y reaccionar lo hace simple.
Podemos agregar oyentes de eventos a cualquier elemento, no solo al foro, sino a cualquier elemento agregando
minúsculas en.
Y luego el nombre del evento.
No, no todos los eventos son compatibles con todos los elementos.
Pero aquí tienes el HD por defecto, todos los elementos disponibles.
Entonces, por ejemplo, en un elemento del foro en el que debe enviar un evento, enviar en un botón.
También tienes en clic.
Pero como es un botón en un foro, es mejor manejarlo en el foro mismo.
Ahora, ¿qué pasas como valor a Enns up Mido como valor?
Debe pasar una función que debe activarse cuando ocurre este evento.
Entonces, un puntero a una función.
Podrías hacerlo este año con llaves y luego una función anónima en línea.
Pero eso no me gusta demasiado.
En cambio, crearé una nueva función aquí.
Y en JavaScript puede crear funciones y funciones.
Entonces, en lugar de la nueva función de objetivo, que todavía es, al final puedo crear una nueva función.
Voy a crear mi
En el controlador de objetivos, la asignación de notas depende de usted.
Pero me gustó su nombre de tener a Handler al final del nombre de mi funks.
Si es una función que se activa en algún evento.
Entonces, esta es una función en este caso, volveré a usar una función de flecha, que
no es imprescindible, pero usaré solo funciones de flecha aquí y Enns up Mitt ahora puede apuntar a AD Gohl Handler.
No lo ejecute aquí, así que no agregue paréntesis.
En cambio, solo desea señalar la función para que el navegador y reaccionar en un esfuerzo común pueda ejecutar
la disfunción por usted.
¿Cuándo se produce el evento de envío?
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
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
hacer aquí porque No está manejando esto en el lado del servidor aquí.
Nuestro servidor solo sirve ese archivo HMO de índice único.
No tiene ninguna lógica para manejar ningún envío.
En cambio, quiero manejarlo aquí en JavaScript en la parte frontal.
En mi aplicación REACT y por el momento ignoraré lo que el usuario ingresó aquí y
simplemente crearé un objetivo ficticio.
Y quiero pasar esa meta ficticia a la aplicación G. S. y agregarlo a mi Scholes principal aquí para que luego se
muestre aquí.
Ahora paso a paso.
Podemos crear una nueva meta dharmica, por supuesto.
En ese artículo, Hannover.
Al agregar una nueva constante de objetivo aquí, que es un objeto JavaScript, la idea aquí podría ser un número
aleatorio.
Con mothe al azar.
Esto, por supuesto, no es realmente un yo único. RE. , pero es lo suficientemente bueno y lo convertiré en una cadena.
Es lo suficientemente bueno para nuestra aplicación de demostración aquí.
Quiero decir.
Y luego el texto aquí más tarde será el texto que el usuario ingresó aquí.
Por ahora, solo un texto falso.
Mi nuevo objetivo
Así que ahora tenemos el nuevo objetivo aquí.
Y, por supuesto, podemos consolar bloqueado para ver que todo funciona hasta este punto.
Entonces si guardamos eso.
Vemos nuestro formulario aquí.
Y si hace clic en Agregar objetivo, la página no se volverá a cargar.
Pero en cambio vemos el objetivo del sello aquí.
Podría crear, por supuesto, múltiples objetivos.
Pero por el momento, no se agregan a esta lista.
Para agregar a la lista, ahora necesitamos sacar ese objetivo del nuevo componente del objetivo al componente de la aplicación.
Ahora, antes de aprender, podemos pasar el estado de nuestra ronda de accesorios.
Pero eso fue de la aplicación a la lista de objetivos.
Entonces, para un componente de nivel inferior, un componente que incluye una aplicación.
Ahora es la otra dirección.
Queremos pasar datos del nuevo objetivo al componente principal.
Entonces, el componente que incluye el nuevo componente objetivo.
¿Como funciona esto?