En esta parte de la traducción del tutorial React, hablaremos sobre cómo trabajar con formularios. En particular, la lección de hoy está dedicada a organizar la interacción de componentes y campos de texto.
→
Parte 1: descripción general del curso, razones de la popularidad de React, ReactDOM y JSX→
Parte 2: componentes funcionales→
Parte 3: archivos de componentes, estructura del proyecto→
Parte 4: componentes principales y secundarios→
Parte 5: inicio del trabajo en una aplicación TODO, los fundamentos del estilo→
Parte 6: sobre algunas características del curso, JSX y JavaScript→
Parte 7: estilos en línea→
Parte 8: trabajo continuo en la aplicación TODO, familiaridad con las propiedades de los componentes→
Parte 9: propiedades del componente→
Parte 10: Taller sobre trabajo con propiedades de componentes y estilo→
Parte 11: generación de marcado dinámico y método de matrices de mapas→
Parte 12: taller, tercera etapa de trabajo en una aplicación TODO→
Parte 13: componentes basados en clases→
Parte 14: taller sobre componentes basados en la clase, estado de los componentes.→
Parte 15: talleres de componentes de salud→
Parte 16: la cuarta etapa de trabajo en una aplicación TODO, manejo de eventos→
Parte 17: quinta etapa de trabajo en una aplicación TODO, modificando el estado de los componentes→
Parte 18: la sexta etapa de trabajo en una aplicación TODO→
Parte 19: métodos del ciclo de vida de los componentes.Parte 20: la primera lección de representación condicional→
Parte 21: segunda lección y taller sobre representación condicional→
Parte 22: la séptima etapa de trabajo en una aplicación TODO, descargando datos de fuentes externas→
Parte 23: primera lección sobre trabajar con formularios→
Parte 24: Segunda lección de formularios→
Parte 25: Taller sobre trabajo con formularios→
Parte 26: arquitectura de la aplicación, patrón de contenedor / componente→
Parte 27: proyecto del cursoLección 41. Trabajar con formularios, parte 1
→
OriginalLos formularios son una parte importante de las aplicaciones web. Pero, como resultó, aquellos involucrados en el desarrollo de React, trabajar con formas generalmente causan ciertas dificultades. El hecho es que React trabaja con formas de una manera especial. En esta lección, utilizaremos el proyecto estándar creado por create-react-app,
App.js forma inicial del archivo
App.js se presenta a continuación.
import React, {Component} from "react" class App extends Component { constructor() { super() this.state = {} } render() { return ( <div> Code goes here </div> ) } } export default App
Tenga en cuenta que para dominar el material de esta lección, debe estar familiarizado con el concepto del estado de la aplicación. Si ha trabajado en todas las lecciones anteriores del curso y ha completado talleres de forma independiente, esto significa que tiene el conocimiento que necesitará aquí.
Aquí está la documentación de React en los formularios. Se recomienda que la mire antes de continuar.
Entonces, en React, los formularios funcionan de manera un poco diferente al uso de JavaScript normal. Es decir, en el enfoque habitual, los formularios se describen usando HTML en páginas web, después de lo cual, usando la API DOM, interactúan con ellos desde JavaScript. En particular, al hacer clic en el botón enviar, recopilan datos de los campos rellenados por el usuario y los preparan para enviarlos al servidor, verificándolos y, si es necesario, informando al usuario que completó algunos campos incorrectamente. En React, en lugar de esperar a que se ingresen todos los materiales en los campos del formulario antes de continuar con el procesamiento de su software, los datos se controlan constantemente utilizando el estado de la aplicación. Esto, por ejemplo, se reduce al hecho de que cada carácter ingresado por el usuario desde el teclado ingresa inmediatamente al estado. Como resultado, en la aplicación React podemos trabajar rápidamente con la última versión de lo que el usuario ingresa en los campos del formulario. Para demostrar esta idea en acción, comenzamos con una descripción del formulario que contiene un campo de texto regular.
Para hacer esto, en el código que devuelve el método
render() , describimos el formulario. En el enfoque habitual, dicho formulario tendría un botón, al hacer clic en el cual los mecanismos del programa de la aplicación comienzan a procesar los datos ingresados en este formulario. En nuestro caso, los datos ingresados por el usuario en el campo irán a la aplicación a medida que se ingresan. Para hacer esto, necesitamos manejar el
onChange campo
onChange . En el controlador de este evento (llamémoslo
handleChange() ) actualizaremos el estado escribiéndole lo que se ingresa en el campo. Para hacer esto, necesitamos, en primer lugar, averiguar qué contiene el campo y, en segundo lugar, poner estos datos en un estado. En el estado, cree una propiedad que almacene el contenido del campo. Vamos a utilizar este campo para almacenar el nombre del usuario, por lo que llamaremos a la propiedad correspondiente
firstName y la inicializaremos con una cadena vacía.
Después de eso, en el constructor, adjuntaremos el controlador de eventos
handleChange() a
this y en el código del controlador usaremos la función
setState() . Dado que el valor anterior que se almacenó en la
firstName estado
firstName no nos interesa, simplemente podemos pasar un objeto con el nuevo valor
firstName a esta función. ¿Qué se debe escribir a esta propiedad?
Si recuerda cómo funcionan los controladores de eventos en JavaScript, resulta que cuando se los llama, se les pasan algunos parámetros predefinidos. En nuestro caso, el objeto de evento se pasa al controlador. Contiene los datos que nos interesan. El campo de texto cuyo evento
onChange que estamos procesando se representa en este objeto como
event.target . Y se puede acceder al contenido de este campo utilizando la construcción
event.target.value .
Ahora, en el método
render() , mostraremos lo que se almacenará en el estado y veremos lo que tenemos.
Aquí está el código que implementa las ideas anteriores.
import React, {Component} from "react" class App extends Component { constructor() { super() this.state = { firstName: "" } this.handleChange = this.handleChange.bind(this) } handleChange(event) { this.setState({ firstName: event.target.value }) } render() { return ( <form> <input type="text" placeholder="First Name" onChange={this.handleChange} /> <h1>{this.state.firstName}</h1> </form> ) } } export default App
Así es como se ve todo en el navegador.
Página de aplicación en el navegadorCada carácter ingresado en el campo aparece inmediatamente en el elemento
<h1> presente en la página.
Ahora pensemos en cómo agregar otro campo al formulario, para el apellido del usuario. Obviamente, para establecer el procesamiento correcto de los datos ingresados en este campo, necesitaremos agregar otra propiedad al estado y trabajar en mecanismos que actualicen el estado al ingresar datos en el campo.
Un enfoque para resolver este problema es crear un controlador de eventos separado para el nuevo campo. Para un formulario pequeño con varios campos de entrada, este es un enfoque completamente normal, pero si estamos hablando de un formulario con docenas de campos, crear un controlador de eventos
onChange separado para cada uno de ellos no es una buena idea.
Para distinguir los campos en el mismo controlador de eventos cuando se cambia, asignaremos las propiedades de
name a los campos, que haremos exactamente lo mismo que los nombres de las propiedades utilizadas para almacenar los datos de campo en el estado (nombre y
lastName ). Después de eso, podemos, trabajando con el objeto de evento que se pasa al controlador, averiguar el nombre del campo, los cambios que llevaron a su invocación y usar este nombre. Lo usaremos configurando el nombre de la propiedad del estado en la que queremos agregar datos actualizados. Aquí está el código que implementa esta característica:
import React, {Component} from "react" class App extends Component { constructor() { super() this.state = { firstName: "", lastName: "" } this.handleChange = this.handleChange.bind(this) } handleChange(event) { this.setState({ [event.target.name]: event.target.value }) } render() { return ( <form> <input type="text" name="firstName" placeholder="First Name" onChange={this.handleChange} /> <br /> <input type="text" name="lastName" placeholder="Last Name" onChange={this.handleChange} /> <h1>{this.state.firstName} {this.state.lastName}</h1> </form> ) } } export default App
Tenga en cuenta que al establecer el nombre de propiedad del objeto pasado a
setState() ,
event.target.name construcción
event.target.name entre corchetes rectangulares.
Página de aplicación en el navegadorLa página ahora muestra lo que se ingresó en el primer campo y lo que se ingresó en el segundo campo.
Los principios de trabajar con campos de texto que acabamos de examinar también son válidos para otros campos basados en ellos. Por ejemplo, estos pueden ser campos para ingresar direcciones de correo electrónico, teléfonos, números. Los datos ingresados en tales campos pueden procesarse utilizando los mecanismos discutidos anteriormente, para cuya operación es importante que los nombres de campo correspondan a los nombres de las propiedades en el estado del componente que almacena los datos de estos campos.
Hablaremos sobre trabajar con otros elementos de formulario en la próxima lección. Aquí tocaremos otro tema relacionado con el llamado "componente controlado", sobre el cual usted, si miró la
documentación de React en los formularios, ya ha leído algo.
Si queremos que lo que se muestra en el campo se corresponda exactamente con lo que está almacenado en el estado de la aplicación, podemos utilizar el enfoque descrito anteriormente, en el que el estado se actualiza a medida que ingresa datos en el campo. La condición es reactiva. Y cuando se utilizan elementos de formulario que son componentes administrados, lo que se muestra en estos elementos es controlado por el estado. Es con este enfoque que es la única fuente de datos de componentes verdaderos. Para lograr esto, es suficiente agregar el atributo de
value al código que describe el elemento de formulario, indicando la propiedad de estado correspondiente al campo. Así es como se verá el código de la aplicación ahora.
import React, {Component} from "react" class App extends Component { constructor() { super() this.state = { firstName: "", lastName: "" } this.handleChange = this.handleChange.bind(this) } handleChange(event) { this.setState({ [event.target.name]: event.target.value }) } render() { return ( <form> <input type="text" value={this.state.firstName} name="firstName" placeholder="First Name" onChange={this.handleChange} /> <br /> <input type="text" value={this.state.lastName} name="lastName" placeholder="Last Name" onChange={this.handleChange} /> <h1>{this.state.firstName} {this.state.lastName}</h1> </form> ) } } export default App
Después de estos cambios, la aplicación funciona exactamente como antes. La principal diferencia con respecto a su versión anterior es que el campo muestra lo que está almacenado en el estado.
Quiero dar un consejo que lo salvará en el futuro de errores que son muy difíciles de depurar.
onChange es como se ve el código del controlador de eventos
onChange ahora:
handleChange(event) { this.setState({ [event.target.name]: event.target.value }) }
Se recomienda que, en lugar de acceder directamente a las propiedades del objeto de
event al construir el objeto pasado a
setState() , extraiga de antemano lo que necesita:
handleChange(event) { const {name, value} = event.target this.setState({ [name]: value }) }
Aquí no entraremos en detalles sobre los errores que pueden evitarse construyendo controladores de eventos de esta manera. Si está interesado, consulte el
SyntheticEvent en la documentación de React.
Resumen
En esta lección, primero se familiarizó con los mecanismos para trabajar con formularios en React. La próxima vez continuaremos con este tema.
Estimados lectores! ¿Utiliza bibliotecas adicionales cuando trabaja con formularios en React?