Una de las cosas más importantes
que hacemos en la web
es interactuar con aplicaciones web a través de formularios.
Entonces los formularios son fundamentales en las aplicaciones web.
Y ahora comencemos a aprender.
cómo trabajar con formularios en React.
Y en primer lugar, cuando creamos formularios en React,
Usamos el elemento de formulario HTML normal.
Entonces tenemos un formulario, y luego aquí,
agreguemos la selección, la entrada y el botón.
Entonces, simplemente mirando la demostración aquí en HTML,
este es un elemento de selección, este es un elemento de entrada.
Y este es sólo un botón normal.
Ahora bien, tenemos que cambiar eso también.
Y hay una configuración en el código VS que lo hará así,
que a medida que actualice este,
la etiqueta de cierre también se actualiza.
Pero lo descubriré después de este vídeo.
y luego te lo haré saber.
Pero de todos modos, ahora creemos eso, seleccionemos el elemento.
Y ahora aquí queremos crear un montón de números.
Entonces, dentro de la selección, creamos una opción con el valor.
Y aquí usemos nuevamente el modo JavaScript.
Entonces, para pasar un número uno real,
y no la cuerda de uno,
dupliquemos esto unas cuantas veces,
porque en realidad no usaremos esto.
Por lo tanto, no es necesario que escriba este código si no lo desea.
Así que esto es sólo para mostrarles lo que haremos en su lugar,
en un minuto aquí.
Primero creemos esa entrada, después de escribir el texto.
Y también incluyamos un marcador de posición aquí.
Y nuevamente, esto es simplemente HTML normal,
lo que estamos haciendo aquí ahora mismo.
Finalmente un botón con agregar.
Ahora bien, hermosa.
Entonces se ve igual que aquí, o muy similar.
Entonces aquí tenemos el uno, dos, tres.
Entonces estos tres valores.
Pero aquí, en la aplicación real, tenemos 20.
Asi que por su puesto,
No queremos escribir estas 20 opciones allí a mano,
¿bien?
Entonces, lo que hacemos es, dentro de JavaScript,
crearemos una matriz con los números del uno al 20,
y luego recorreremos esa matriz,
y básicamente crear una lista de elementos de opción.
Así que hagámoslo y usaremos un buen truco.
que se llama array.from.
Y no es realmente importante cómo funciona esta función.
Así que sigamos esto aquí.
Y, de hecho, haremos esto todo el tiempo en React.
Entonces este truco es bastante importante.
Entonces, como primer parámetro aquí,
podemos pasar un objeto con una propiedad de longitud,
y póngalo en 20.
Entonces eso creará una matriz vacía con 20 elementos.
Y luego, como segunda parte,
Podemos pasar básicamente algo así como una función de mapa.
Entonces eso recibirá como primer argumento,
el valor actual, y como segundo argumento, el índice.
Y aquí solo nos interesa ese índice,
porque ahora devolveremos ese índice,
que comienza en cero más uno.
Y entonces obtenemos una matriz, que va de uno a 20.
Y si lo queremos,
podríamos tomar este fragmento de código aquí mismo,
y ejecútelo dentro de nuestra consola, hágalo un poco más grande.
Y sí, de hecho nos falta la clave en algún lugar,
Pero no importa, lo arreglaremos en un minuto.
Y, de hecho, aquí obtenemos esa matriz de uno a 20.
está bien.
Y ahora todo lo que tenemos que hacer es usar nuevamente el método del mapa,
y recorrer esto
para crear nuestra lista de estos elementos de opción.
De nuevo, especificando el valor,
y ahora ese valor simplemente está entumecido y necesitamos la clave.
Y esa llave también está adormecida.
Así que recuerda que cuando renderizamos una lista,
Necesitamos darle a cada uno de los elementos una clave única.
Así que el número aquí es, por supuesto, único.
Y luego aquí también entumecido.
Así que dale una caja fuerte.
lo que hace que esto sea un poco más legible.
Y entonces esta opción
es básicamente exactamente lo que teníamos antes aquí manualmente.
Pero ahora lo creamos dinámicamente aquí,
automáticamente de cero a 20.
Así que ahí está.
Entonces, ya que estábamos hablando de esta clave aquí,
Vayamos también a esta lista y arreglemos la clave allí.
Así que aquí donde tenemos ese mapa,
También debemos pasar la clave.
Entonces esa clave nuevamente debe ser algo único.
Y lo que es único aquí es esta propiedad ID,
Aún no es material, ese es el usuario tres.
Y ahora estas identificaciones son únicas.
Y esos son los que vamos a usar.
Por lo general, cuando obtenemos una serie de objetos,
Cada uno de estos objetos debe tener una identificación.
Entonces ese es el candidato perfecto.
para usar aquí como clave.
y otra vez,
Más adelante aprenderemos exactamente cuál es esta clave,
y por qué es tan importante.
Pero sin él, React siempre se quejará.
Muy bien, después de recargarlo, desapareció.
Y entonces volvamos a nuestra forma,
y el formulario ya está completo en este punto.
Y entonces hablemos ahora de eventos.
Básicamente, lo que queremos que suceda
es cuando hacemos clic en este botón aquí,
queremos que se envíe este formulario.
Y entonces podemos reaccionar al envío de este formulario.
con un controlador de eventos.
Así que hagamos lo que acabo de decir.
Primero, creemos el controlador de eventos.
Y lo haremos como antes,
justo en la función del componente.
Entonces aquí creamos otra función,
y este normalmente se llama handleSubmit.
¿está bien?
Y ahora todo lo que tenemos que hacer
es escuchar ese evento de envío.
Entonces, ¿cómo crees que hacemos eso?
Bueno, vamos aquí mismo a este formulario,
y luego agregamos onSubmit.
Y luego todo lo que tenemos que hacer
es pasar la función handleSubmit
que acabamos de crear.
Y de nuevo, es muy, muy importante entender
es que no llamamos a la función aquí.
Entonces no hacemos esto.
En lugar de reaccionar, llamaremos a la función por nosotros.
tan pronto como ocurra el evento onSubmit.
Ahora bien, ¿cuándo exactamente ocurrirá ese evento de envío?
Pues simplemente en cuanto hagamos clic aquí en este botón.
Pero por ahora, por supuesto, no pasa nada.
porque todavía no tenemos ninguna lógica en nuestra función de controlador.
Ahora otra forma en la que se puede enviar un formulario.
es presionando la tecla enter,
mientras estamos aquí en el envío.
Entonces, cuando estoy aquí y presiono Enter,
entonces verá que el formulario se envió realmente.
Entonces tal vez viste que hubo un breve destello de recarga,
y ese es sólo un comportamiento normal de los formularios en HTML.
Entonces eso no tiene nada que ver con React.
Ahora hagamos esto una vez más, para poder mostrárselo.
Entonces, redactar el examen y luego enviarlo, observe lo que sucede.
Entonces, como te dije antes,
hubo como un breve destello,
y luego la página se recargó.
Y entonces el texto que tenemos aquí desapareció.
Ahora recuerda
Toda esa conversación sobre la aplicación de una sola página.
Donde mencioné que en una aplicación de una sola página,
como queremos construir con React,
Por lo general, podemos enviar un formulario sin que la página se recargue.
En otras palabras, lo que queremos
es para que esta página no se recargue.
Por eso necesitamos desactivar este comportamiento predeterminado de HTML.
Entonces la forma en que lo hacemos es aceptar el evento aquí.
Y luego aquí podemos usar event.preventDefault.
Y nuevamente, este es JavaScript normal aquí.
Entonces, si estás acostumbrado a trabajar con formularios
en JavaScript vainilla,
entonces probablemente hayas visto esto antes.
Así que veamos qué pasa ahora cuando enviamos,
si entonces no pasa nada.
Eso es exactamente lo que queremos ahora.
No queremos recarga.
Por eso queremos permanecer aquí en la misma página.
Entonces, construyendo una aplicación de una sola página.
Ahora, ¿qué pasa con esta E aquí? ¿Cómo llega aquí?
Bueno, tan pronto como ocurra el evento de envío,
React llamará a esta función handleSubmit.
Y cuando lo haga,
pasará a la función, el objeto de evento.
Entonces un objeto con toda la información.
sobre el evento actual.
De nuevo, eso es muy similar.
a lo que ya sucede en Vanilla JavaScript.
Así que aquí también podríamos escribir básicamente esto.
Entonces esto sería exactamente lo mismo,
pero entonces es un poco más obvio lo que sucede.
Entonces aquí esta función obtiene el evento,
y luego llamamos a handleSubmit con ese evento.
Pero eso es algo redundante.
Así que eliminemos eso.
Así que recapitulemos rápidamente lo que hicimos aquí.
que en realidad no fue mucho,
pero aún así es importante entender lo que pasó aquí.
Primero que nada, acabamos de crear un elemento de formulario,
y luego la parte importante
es que estamos escuchando ahora el evento de envío,
eso sucede en el formulario.
Y ese evento ocurre en el formulario.
tan pronto como hagamos clic en este botón,
o tan pronto como presionemos enter
mientras estamos en este elemento de entrada.
Y nuevamente, ese es solo un comportamiento normal de HTML.
Ahora tampoco pudimos escuchar el evento de envío,
y en su lugar escuche y haga clic aquí.
Entonces podríamos hacer así, net end por ejemplo,
crea una función, handleClick.
Entonces, en lugar de manejarEnviar.
Entonces eso también funcionaría,
pero solo funcionaría con hacer clic en el botón.
Entonces eso no funcionaría cuando presionemos Enter mientras estamos aquí.
Pero en realidad queremos eso.
Entonces, en su lugar, escuchemos el evento de envío.
Y al hacerlo, aprovechamos el poder de los formularios HTML.
Ahora la siguiente pregunta
es cómo obtenemos realmente estos datos del formulario
en este controlador de eventos, ¿verdad?
Porque por supuesto el objetivo
es hacer algo con estos datos.
Entonces con esta cantidad y con esta descripción del artículo.
Bueno, hay varias formas de hacerlo.
Entonces podríamos obtener esos datos directamente del objeto del evento.
Así que veamos,
Nos gustaría registrar este evento en la consola.
Así que veamos qué pasa.
Entonces aquí tenemos este evento base sintético,
y hablaremos de
Qué es este evento sintético un poco más tarde.
Pero ya ves que aquí conseguimos el objetivo.
Básicamente, el elemento sobre el que se disparó el evento.
Y luego tenemos, por ejemplo,
la entrada en la que podemos ver el valor.
Entonces la prueba es exactamente lo que tenemos aquí, ¿verdad?
Sin embargo, en React, normalmente no hacemos esto.
En su lugar, utilizamos algo llamado elementos controlados.
Pero ese es un tema para un video completamente nuevo.
Así que ahora tomemos un descanso y volvamos en un segundo.