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.
→
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 42. Trabajar con formularios, parte 2
→
OriginalEn 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 navegadorLos 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áginaComo 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ónLa 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 marcadaEs 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 consolaBien 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 banderaComo 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ónTodo 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 combinadoComo 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.
