Trabajar con formularios y elementos de formulario cuando se desarrolla con React puede ser complejo porque los elementos de formulario HTML se comportan de manera algo diferente en React que otros elementos DOM.
Aprenda a trabajar con formularios y elementos de formulario, como casillas de verificación, áreas de texto y entradas de texto de una sola línea.
Gestión de campos de entrada en formularios
En React, la administración de un campo de entrada en un formulario a menudo se logra creando un estado y vinculándolo al campo de entrada.
Por ejemplo:
funciónaplicación() {const [firstName, setFirstName] = React.useState('');
funciónhandleFirstNameChange(evento) {
establecerNombre( evento.objetivo.valor )
}
devolver (
<forma>
<tipo de entrada ='texto' marcador de posición ='Nombre de pila' onInput={handleFirstNameChange} />
</form>
)
}
Arriba tenemos un
nombre de pila estado, un enEntrada evento, y un manejarCambiar manipulador. El manejarCambiar La función se ejecuta en cada pulsación de tecla para actualizar el nombre de pila estado.Este enfoque puede ser ideal cuando se trabaja con un campo de entrada, pero se crean diferentes estados y las funciones del controlador para cada elemento de entrada se volverían repetitivas cuando se trabaja con múltiples entradas campos.
Para evitar escribir código repetitivo y redundante en tales situaciones, dé a cada campo de entrada un nombre distinto, establezca un objeto como el valor de estado inicial de su formulario, y luego complete el objeto con propiedades con los mismos nombres que la entrada campos.
Por ejemplo:
funciónaplicación() {constante [formData, setFormData] = React.useState(
{
nombre de pila: '',
apellido: ''
}
);
devolver (
<forma>
<tipo de entrada ='texto' marcador de posición ='Nombre de pila' nombre='nombre de pila' />
<tipo de entrada ='texto' marcador de posición ='Apellido' nombre='apellido' />
</form>
)
}
El formularioDatos servirá como variable de estado para administrar y actualizar todos los campos de entrada dentro del formulario. Asegúrese de que los nombres de las propiedades en el objeto de estado sean idénticos a los nombres de los elementos de entrada.
Para actualizar el estado con los datos de entrada, agregue un enEntrada detector de eventos al elemento de entrada, luego llame a su función de controlador creada.
Por ejemplo:
funciónaplicación() {constante [formData, setFormData] = React.useState(
{
nombre de pila: '',
apellido: ''
}
);
funciónmanejarCambiar(evento) {
setFormData( (prevState) => {
devolver {
...prevEstado,
[evento.objetivo.nombre]: evento.objetivo.valor
}
})
}
devolver (
<forma>
<aporte
tipo ='texto'
marcador de posición ='Nombre de pila'
nombre='nombre de pila'
onInput={manejarCambio}
/>
<aporte
tipo ='texto'
marcador de posición ='Apellido'
nombre='apellido'
onInput={manejarCambio}
/>
</form>
)
}
El bloque de código anterior usaba un enEntrada evento y una función de controlador, handleFirstNameChange. Este handleFirstNameChange La función actualizará las propiedades de estado cuando se llame. Los valores de las propiedades de estado serán los mismos que los de sus correspondientes elementos de entrada.
Convertir sus entradas en componentes controlados
Cuando se envía un formulario HTML, su comportamiento predeterminado es navegar a una nueva página en el navegador. Este comportamiento es inconveniente en algunas situaciones, como cuando desea validar los datos introducidos en un formulario. En la mayoría de los casos, le resultará más adecuado tener una función de JavaScript con acceso a la información ingresada en el formulario. Esto se puede lograr fácilmente en React usando componentes controlados.
Con los archivos index.html, los elementos de formulario conservan un registro de su estado y lo modifican en respuesta a la entrada de un usuario. Con React, la función de establecer estado modifica un estado dinámico almacenado en la propiedad de estado del componente. Puede combinar los dos estados haciendo que el estado Reaccionar sea la única fuente de verdad. De esta forma, el componente que crea un formulario controla lo que sucede cuando un usuario ingresa datos. Los elementos de formulario de entrada con valores que React controla se denominan componentes controlados o entradas controladas.
Para hacer uso de entradas controladas en su aplicación React, agregue un accesorio de valor a su elemento de entrada:
funciónaplicación() {constante [formData, setFormData] = React.useState(
{
nombre de pila: '',
apellido: ''
}
);
funciónmanejarCambiar(evento) {
setFormData( (prevState) => {
devolver {
...prevEstado,
[evento.objetivo.nombre]: evento.objetivo.valor
}
})
}
devolver (
<forma>
<aporte
tipo ='texto'
marcador de posición ='Nombre de pila'
nombre='nombre de pila'
onInput={manejarCambio}
value={formData.firstName}
/>
<aporte
tipo ='texto'
marcador de posición ='Apellido'
nombre='apellido'
onInput={manejarCambio}
valor={formData.lastName}
/>
</form>
)
}
Los atributos de valor de los elementos de entrada ahora están configurados para ser el valor de las propiedades de estado correspondientes. El valor de la entrada siempre está determinado por el estado cuando se usa un componente controlado.
Manejo del elemento de entrada Textarea
El área de texto El elemento es como cualquier elemento de entrada regular pero contiene entradas de varias líneas. Es útil al pasar información que requiere más de una sola línea.
En un archivo index.html, el etiqueta de área de texto elemento determina su valor por sus hijos, como se ve en el bloque de código a continuación:
<área de texto>
¿Hola, cómo estás?
</textarea>
Con React, para usar el área de texto elemento, puede crear un elemento de entrada con el tipo área de texto.
Al igual que:
funciónaplicación() {devolver (
<forma>
<tipo de entrada ='área de texto' nombre='mensaje'/>
</form>
)
}
Una alternativa al uso área de texto como un tipo de entrada es usar el área de texto etiqueta de elemento en lugar de la etiqueta de tipo de entrada, como se ve a continuación:
funciónaplicación() {devolver (
<forma>
<área de texto
nombre='mensaje'
valor='¿Hola, cómo estás?'
/>
</form>
)
}
El área de texto La etiqueta tiene un atributo de valor que contiene la información del usuario ingresada en el área de texto elemento. Esto hace que funcione como un elemento de entrada predeterminado de React.
Trabajar con el elemento de entrada Checkbox de React
Las cosas son un poco diferentes cuando se trabaja con caja entradas. El campo de entrada del tipo caja no tiene un atributo de valor. Sin embargo, tiene un comprobado atributo. Este comprobado El atributo difiere de un atributo de valor al requerir un valor booleano para determinar si la casilla está marcada o no.
Por ejemplo:
funciónaplicación() {devolver (
<forma>
<tipo de entrada ='caja' identificación ='unión' nombre='unirse' />
<etiqueta htmlPara='unión'>¿Te gustaría unirte a nuestro equipo?</label>
</form>
)
}
El elemento de etiqueta se refiere a la identificación del elemento de entrada usando el htmlPara atributo. Este htmlPara El atributo toma el ID del elemento de entrada; en este caso, unión. Cuando creando un formulario HTML, el htmlPara atributo representa el para atributo.
El caja se utiliza mejor como una entrada controlada. Puede lograr esto creando un estado y asignándole el valor booleano inicial de verdadero o falso.
Debes incluir dos accesorios en el caja elemento de entrada: un comprobado propiedad y un onChange evento con una función de controlador que determinará el valor del estado usando el setIsChecked() función.
Por ejemplo:
funciónaplicación() {constante [está marcado, establece está marcado] = React.useState (FALSO);
funciónmanejarCambiar() {
setIsChecked( (prevState) => !prevEstado )
}
devolver (
<forma>
<aporte
tipo ='caja'
identificación ='unión'
nombre='unirse'
marcado = {está marcado}
onChange={manejarCambio}
/>
<etiqueta htmlPara='unión'>¿Te gustaría unirte a nuestro equipo?</label>
</form>
)
}
Este bloque de código genera un está chequeado y establece su valor inicial en FALSO. Establece el valor de está chequeado hacia comprobado atributo en el elemento de entrada. El manejarCambiar La función se activará y cambiará el valor de estado de está chequeado a su opuesto cada vez que haga clic en la casilla de verificación.
Es probable que un elemento de formulario contenga varios elementos de entrada de diferentes tipos, como casillas de verificación, texto, etc.
En tales casos, puede manejarlos de manera similar a como manejó múltiples elementos de entrada del mismo tipo.
Aquí hay un ejemplo:
funciónaplicación() {dejar[formData, setFormData] = React.useState(
{
nombre de pila: ''
unirse: verdadero,
}
);
funciónmanejarCambiar(evento) {
constante {nombre, valor, tipo, verificado} = evento.objetivo;
setFormData( (prevState) => {
devolver {
...prevEstado,
[nombre]: tipo ¿caja? marcado: valor
}
})
}
devolver (
<forma>
<aporte
tipo ='texto'
marcador de posición ='Nombre de pila'
nombre='nombre de pila'
onInput={manejarCambio}
value={formData.firstName}
/>
<aporte
tipo ='caja'
identificación ='unión'
nombre='unirse'
marcado = {formData.join}
onChange={manejarCambio}
/>
<etiqueta htmlPara='unión'>¿Te gustaría unirte a nuestro equipo?</label>
</form>
)
}
Tenga en cuenta que en el manejarCambiar función, setFormData utiliza un operador ternario para asignar el valor de la comprobado propiedad a las propiedades de estado si el tipo de entrada de destino es un caja. Si no, asigna los valores de la valor atributo.
Ahora puede manejar formularios de reacción
Aprendiste a trabajar con formularios en React usando diferentes elementos de entrada de formularios aquí. También aprendió a aplicar entradas controladas a los elementos de su formulario agregando un accesorio de valor o un accesorio marcado al trabajar con casillas de verificación.
El manejo eficiente de los elementos de entrada del formulario React mejorará el rendimiento de su aplicación React, lo que dará como resultado una mejor experiencia de usuario en general.
