Tutorial de React Parte 24: Lección de los segundos formularios

Hoy continuamos la discusión sobre el uso de formularios en React. La última vez, examinamos las características de la interacción de componentes y campos de texto. Aquí discutimos trabajar con otros elementos de formulario.

imagen

→ 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 curso

Lección 42. Trabajar con formularios, parte 2


→ Original

En esta lección, hablaremos sobre los campos para ingresar texto de varias líneas, sobre las banderas, sobre los botones de opción (también se los llama "botones de opción") y sobre los campos de lista. Hasta la fecha, solo hemos considerado trabajar con campos de entrada de texto ordinarios.
Aquí está el código para el componente de la App que comenzaremos los experimentos de hoy:

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {           firstName: "",           lastName: ""       }       this.handleChange = this.handleChange.bind(this)   }     handleChange(event) {       const {name, value} = event.target       this.setState({           [name]: 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}               />                             {                   /**                    *    :                    *                    * <textarea />                    * <input type="checkbox" />                    * <input type="radio" />                    * <select>  <option>                    */               }                             <h1>{this.state.firstName} {this.state.lastName}</h1>           </form>       )   } } export default App 

Así es como se ve la página de la aplicación en el navegador en esta etapa del trabajo.


Página de aplicación en el navegador

Los formularios generalmente contienen no solo campos en los que se ingresan líneas cortas. Al equipar formularios con otros elementos, trabajar con ellos en React es un poco complicado, aunque no tiene nada de especial.

En el código anterior hay un fragmento comentado que enumera los elementos de los que hablaremos. Comencemos con el campo para ingresar texto de varias líneas: el elemento textarea . Probablemente sea más fácil entender cómo trabajar con él. Si solía usar este elemento al crear formularios HTML normales, sabe que esta no es una etiqueta de cierre automático, como fue el caso con el elemento de input . Tiene partes de apertura y cierre.
Agregue este elemento al formulario insertando, inmediatamente después del comentario, el siguiente código:

 <br /> <textarea></textarea> 

Si ahora mira la página de la aplicación, puede ver cómo apareció un campo para ingresar texto de varias líneas.


Campo para ingresar texto en la página

Como puede ver, este campo es ligeramente más alto que los campos ordinarios, el usuario puede cambiar su tamaño usando el marcador en su parte inferior derecha. Gracias a los cols rows y cols puede especificar sus dimensiones al describir este elemento. En HTML normal, si desea tener algo de texto después de que se muestra, esto se hace ingresando el texto deseado entre las etiquetas de apertura y cierre del elemento. En React, trabajar con dichos elementos se hace lo más similar posible al trabajo con elementos de input , de los que hablamos la última vez. A saber, en React, la etiqueta textarea se cierra automáticamente. Es decir, el código para mostrar el campo en la página se puede cambiar de la siguiente manera:

 <textarea /> 

Puede usar el atributo de value en esta etiqueta, además, trabajar con él se lleva a cabo exactamente de la misma manera que con el mismo atributo de los campos de texto ordinarios. Debido a esto, se logra la uniformidad en el trabajo con diferentes elementos y, además, es más fácil actualizar el contenido de los campos actualizando las propiedades de estado asociadas a dichos campos. Llevemos el estado del código de campo a este formulario:

 <textarea value={"Some default value"}/> 

Esto hará que el texto especificado aparezca en el campo cuando se muestre en la página.


El texto que aparece en el campo.

Volveremos a trabajar con el campo para ingresar texto de varias líneas, pero por ahora hablaremos de las banderas. Una casilla de verificación es un control de input cuyo tipo es checkbox . Aquí está su descripción:

 <input type="checkbox" /> 

Así es como se ve la bandera descrita por este marcado en la página.


Casilla de verificación

La característica principal de este control es el hecho de que el atributo de value no se utiliza cuando se trabaja con él. Se utiliza para proporcionar al usuario una opción de dos opciones, una de las cuales corresponde a la casilla de verificación y la otra a la no seleccionada. Para rastrear si la casilla de verificación está marcada o no, se utiliza el atributo checked , que se describe mediante un valor lógico. Como resultado, las banderas generalmente corresponden a propiedades lógicas almacenadas en el estado.

Llevemos el estado del componente a este formulario:

 this.state = {   firstName: "",   lastName: "",   isFriendly: true } 

El código de descripción del indicador se cambia de la siguiente manera:

 <input   type="checkbox"   checked={this.state.isFriendly} /> 

Después de eso, la casilla de verificación seleccionada se mostrará en la página.


Casilla marcada

Es cierto, ahora no responderá a los clics en él. El hecho es que el indicador está vinculado a la variable correspondiente almacenada en el estado, como resultado, cuando intentamos, en nuestro caso, eliminarlo, Reaccionar, verificar el estado y descubrir que la propiedad isFriendly establecida en true , no lo permite. Al mismo tiempo, se mostrará una advertencia en la consola que indica que no proporcionamos un mecanismo para cambiar el campo ( onChange eventos onChange ) y que se mostró en un estado de solo lectura.


Advertencia de consola

Bien podemos escribir un método especial para trabajar con la bandera, pero el código de nuestro componente ya tiene el método handleChange() . Ahora se usa para trabajar con campos de texto. Pensaremos en cómo usarlo para trabajar con la bandera. Para hacer esto, primero asigne el método anterior como el onChange eventos onChange bandera y asigne a la bandera un nombre correspondiente al nombre de la propiedad del estado relacionada con la bandera. Además, firmaremos la bandera con la etiqueta:

 <label>    <input       type="checkbox"       name="isFriendly"       checked={this.state.isFriendly}       onChange={this.handleChange}   /> Is friendly? </label> 

En el método handleChange() , cuyo código se muestra a continuación, cuando trabajamos con campos de texto, descubrimos el nombre del elemento ( name ) y su contenido ( value ), después de lo cual actualizamos el estado escribiendo en él el campo con un nombre determinado en Su atributo de value :

 handleChange(event) {   const {name, value} = event.target   this.setState({       [name]: value   }) } 

Ahora tenemos que descubrir cómo lidiar con una bandera que no tiene atributo de value . Solo tiene el atributo checked , que solo puede aceptar valores true o false . Como resultado, para utilizar el método handleChange() para trabajar con un indicador, debemos verificar si el elemento para el que se llama a este controlador es un indicador. Para realizar esta verificación, recordamos que el valor de la checkbox de checkbox se establece como el tipo de elemento de input que representa la bandera. Para verificar este valor, puede referirse a la propiedad type del elemento event.target . event.target esta propiedad de event.target , así como la propiedad checked , utilizando la siguiente construcción:

 const {name, value, type, checked} = event.target 

Ahora podemos verificar el valor de la constante de type y averiguar si el elemento para el que se llama al controlador de eventos es un indicador. Si este es el caso, escribiremos en el estado lo que resultó estar en la constante checked . No olvide guardar el código responsable de trabajar con campos de texto. Como resultado, el código handleChange() toma la siguiente forma:

 handleChange(event) {   const {name, value, type, checked} = event.target   type === "checkbox" ? this.setState({ [name]: checked }) : this.setState({ [name]: value }) } 

Después de eso, verifique el funcionamiento de la bandera.


Comprobando el funcionamiento de la bandera

Como puede ver, ahora se puede quitar e instalar. Al mismo tiempo, el trabajo de los campos de texto no se interrumpe. Una notificación con respecto a la casilla de verificación ha desaparecido de la consola, pero allí se muestra una notificación con respecto al campo para ingresar texto de varias líneas. Cambie el código que describe este campo de la siguiente manera:

 <textarea   value={"Some default value"}   onChange={this.handleChange} /> 

Esto llevará a la desaparición de la notificación, aunque no implementamos otros mecanismos para trabajar con este campo utilizando las herramientas del componente (no especificamos un nombre para el campo, no agregamos la propiedad correspondiente al estado). Puede implementar estas características usted mismo. Ahora hablemos de interruptores.

Se pueden representar como una combinación de elementos de input de text y tipos de checkbox . Lo que se quiere decir aquí es que los interruptores tienen un atributo de value y un atributo checked . Agregue un par de interruptores a nuestro formulario, creando su código basado en el código de descripción de la bandera. Así es como se ve:

 <label>   <input       type="radio"       name="gender"       value="male"       checked={this.state.isFriendly}       onChange={this.handleChange}   /> Male </label> <br /> <label>   <input       type="radio"       name="gender"       value="female"       checked={this.state.isFriendly}       onChange={this.handleChange}   /> Female </label> 

Creamos este código basado en el código de descripción de la bandera y aún no hemos editado algo. Por lo tanto, los interruptores se comportan de manera extraña. En particular, si la casilla de verificación no está marcada, ambos interruptores están en el estado "apagado", y si selecciona la casilla de verificación, uno de ellos estará "activado". Tales errores pueden prevenirse tratando cuidadosamente el código del elemento si se crea sobre la base del código de los elementos existentes. Ahora lo arreglaremos.
Tenga en cuenta que estos dos elementos tienen el mismo nombre: gender . Los interruptores con el mismo nombre forman un grupo. Solo se puede seleccionar un interruptor incluido en dicho grupo.

Al configurar los interruptores, no puede simplemente indicar que su valor checked está establecido, por ejemplo, en true si alguna propiedad de estado es true . Los conmutadores deben admitir cambios sincronizados, dentro del grupo, en su propio estado. En cambio, el valor checked de los interruptores se establece por condición. En nuestro caso, esta condición se representará comparando la propiedad estatal de this.state.gender con la cadena male o female . En el código de descripción del interruptor, se ve así:

 <label>   <input       type="radio"       name="gender"       value="male"       checked={this.state.gender === "male"}       onChange={this.handleChange}   /> Male </label> <br /> <label>   <input       type="radio"       name="gender"       value="female"       checked={this.state.gender === "female"}       onChange={this.handleChange}   /> Female </label> 

Ahora agregue una nueva propiedad, gender , al estado, inicializándola con una cadena vacía:

 this.state = {   firstName: "",   lastName: "",   isFriendly: false,   gender: "" } 

Después de eso, los interruptores funcionarán independientemente de la casilla de verificación. Agregue al código generado por el componente un encabezado de segundo nivel que muestre información sobre qué interruptor está seleccionado:

 <h2><font color="#3AC1EF">You are a {this.state.gender}</font></h2> 

Aquí, probablemente, vale la pena introducir algún mecanismo de representación condicional. Esto permitirá, al abrir la página, cuando no se seleccione ninguno de los botones de radio, para asegurarse de que el texto You are a no se muestre en él, pero no lo haremos, aunque puede implementarlo completamente usted mismo. Ahora echemos un vistazo a lo que tenemos.


Cambia en la página de la aplicación

Todo lo que hablamos aquí puede parecer bastante complicado. En particular, esto se refiere a la memorización de las características de los diferentes controles. Para simplificar el trabajo con formularios, puede usar bibliotecas especializadas. Por ejemplo, la biblioteca formik . Esta biblioteca simplifica enormemente el proceso de desarrollo de formularios en aplicaciones React.

Ahora hablemos de los campos de lista.

En HTML normal, las siguientes construcciones se utilizan para describir cuadros combinados:

 <select>   <option></option>   <option></option>   <option></option> <select/> 

React adopta un enfoque similar, aunque, como con otros elementos, se utiliza el atributo de value . Esto facilita averiguar exactamente qué elemento de la lista está seleccionado y, además, facilita el trabajo con el estado del componente.

Supongamos que queremos crear un cuadro combinado que permita al usuario seleccionar su color favorito. Para hacer esto, puede poner la siguiente construcción en el atributo de value del elemento select : value={this.state.favColor} . Esto obtendrá los valores que el usuario selecciona. Ahora agregue favColor al estado:

 this.state = {   firstName: "",   lastName: "",   isFriendly: false,   gender: "",   favColor: "blue" } 

A continuación, onChange el cuadro combinado con el onChange eventos onChange y le damos un nombre. También asignamos valores de valor a los elementos de options del cuadro combinado e ingresamos el texto que se mostrará en el cuadro.

Así es como se ve un elemento de select firma select con una firma:

 <label>Favorite Color:</label> <select   value={this.state.favColor}   onChange={this.handleChange}   name="favColor" >   <option value="blue">Blue</option>   <option value="green">Green</option>   <option value="red">Red</option>   <option value="orange">Orange</option>   <option value="yellow">Yellow</option> </select> 

Ahora agregue otra inscripción al formulario que muestra el color favorito del usuario:

 <h2><font color="#3AC1EF">Your favorite color is {this.state.favColor}</font></h2> 

Es hora de probar el cuadro combinado.


Cuadro combinado

Como puede ver, aunque nuestra forma no brilla con la sofisticación del diseño, los controles colocados en él funcionan como se esperaba.

Gracias a la forma en que los controles React están organizados en React, es fácil usar el mismo controlador para manejar sus eventos. Este es exactamente el esquema de trabajo utilizado en nuestro caso. La única característica de nuestro controlador handleChange() es que tenemos que manejar los eventos de bandera de una manera especial.

Ahora hablemos de enviar el formulario o procesar los valores ingresados ​​después de completarlo. Hay dos enfoques para realizar tales acciones. Al usar cualquiera de ellos, el formulario debe estar equipado con un botón:

 <button>Submit</button> 

En HTML5, si se encuentra un elemento de button en el formulario, actuará como un antiguo elemento de input de tipo submit . Si hace clic en este botón, se onSubmit un evento del formulario onSubmit . Si necesita hacer algo después de completar el formulario, puede agregar el onClick eventos onClick al botón, pero, por ejemplo, personalmente prefiero manejar dichos eventos a nivel de formulario asignándole el controlador de eventos onSubmit :

 <form onSubmit={this.handleSubmit}> 

El método utilizado como controlador para este evento aún no se ha escrito. Este es un controlador de eventos regular, que, por ejemplo, refiriéndose a una determinada API, le pasa datos de formulario.

Resumen


En esta lección, concluimos nuestra charla sobre trabajar con formularios en React. La próxima vez encontrará trabajo práctico sobre este tema.

Estimados lectores! Si trató de usar la biblioteca formik para crear formularios en React, cuéntenos al respecto.

Source: https://habr.com/ru/post/444356/


All Articles