Preparando un formulario en React - Tutorial de React.js

En esta lección, aprenderemos cómo preparar un formulario para poder trabajarlo dentro de una aplicación de React. Yo acá estoy trabajando una aplicación React y ya he incluido los elementos básicos de un formulario. Como puedes ver, acá tenemos una entrada de texto y un botón. Podemos incluso agregar valores y presionar en el botón y vamos a tener una funcionalidad básica. Veamos el código que está generando este formulario. Y, como podemos ver, acá yo estoy incluyendo la etiqueta form. Esta es la etiqueta que, en teoría, dentro de HTML5, nos permite gestionar un formulario. También he incluido un input para poder hacer la captura de texto y tengo un botón que está funcionando con el type="submit", que nos permite enviar la información que se encuentra dentro de este formulario. Es una funcionalidad bastante estándar la que estamos definiendo acá. Yo le voy a agregar algunos elementos extra a este formulario. Por ejemplo, le voy a poner un input y, a este input, lo voy a definir que sea de type="text" porque vamos a capturar texto. También es importante definirle un nombre. En este caso, lo voy a llamar item2 porque ya tengo otro elemento con el item1. Acá le voy a agregar una clase y, específicamente en React, tengo que utilizar la propiedad className para agregar esta clase. Y, finalmente, le voy a incluir acá un placeholder. El placeholder me va a permitir desplegar un texto que va a orientar a mis usuarios sobre cuál es la funcionalidad de esta entrada de texto. Veamos el resultado. Tenemos que guardar antes. Y ahora sí, vemos que ya se incluyó el segundo elemento. Voy a agregar un elemento más. Vamos a darle formato a este documento y examinamos el resultado final. Tenemos acá, básicamente, tres diferentes elementos y podemos guardar. Ahora, el primer detalle es que, si por ejemplo yo tengo acá, dentro de mi apellido, vamos a poner «solis», «carlos» y si presiono en Guardar, vamos a ver que va a pasar un detalle en particular, que es que, al hacer clic acá, la información se va a borrar. Ese es el primer problema. El segundo problema es que vemos que, automáticamente, hemos cambiado de dirección en el URL. Esto no es una característica deseable porque esto puede romper el flujo de nuestras aplicaciones. Para evitar que eso ocurra, vamos a modificar este formulario. Tenemos que ubicar específicamente la etiqueta form. Y esto es importante de mencionar. No tienes que incluir la etiqueta form. En el caso de los formularios de React, si deseas, puedes únicamente eliminarla y tu formulario va a funcionar exactamente igual. Pero en el caso de que necesites incluirla, es importante que capturemos el evento onSubmit. Este evento onSubmit se está activando gracias al botón que tenemos acá, que es un botón de tipo submit. Así que vamos a capturar este evento, que es el que justamente está moviéndonos de la dirección en la que estábamos hacia una nueva. Vamos a poner acá onSubmit y vamos a llamar a un evento. En este caso, se va llamar this.onSubmitHandler. Vamos ahora a crear este método, que se va a activar cada vez que el usuario haga clic en el botón de Enviar. Vamos a crear onSubmitHandler. En este caso, vamos a igualarlo a un arrow function. Vamos a capturar el evento y, acá mismo, vamos a llamar a evento.preventDefault. Esto lo que va hacer es que va a prevenir esa conducta por defecto que ya tiene el formulario. Así, vamos a compensar el hecho de que esté activándose el formulario con el botón onSubmit. Guardamos, volvemos otra vez a nuestra aplicación, pongo mi nombre de nuevo y, al hacer clic acá, ya no vamos a cambiar de dirección. Vamos a revisarlo una vez más con la dirección original. Estamos en localhost. Presiono en Guardar y vemos que ahora ya no se está ejecutando esta función. Tenemos listo nuestro formulario para comenzar a procesar los datos dentro de React.