Saltar al contenido

Manejo de las formas de Reaccionar utilizando HooksSep, 14thIn esta guía, vamos a aprender cómo manejar las formas …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cómo manejar las formas de reaccionar aplicaciones mediante el uso de ganchos.

Formas Formas

nos permiten aceptar los datos de los usuarios y la envía al servidor para su procesamiento. Son un tipo diferente de formas tales como Iniciar sesión, Register y de contacto, etc.

En HTML5 tenemos como elementos de formulario de entrada, área de texto, seleccionar mantienen allí posee internalstate en el Reino pero en reaccionan mantenemos el estado los elementos de formulario dentro de la por lo que el componente que podemos tener un control total sobre los elementos del formulario.

¿Cuál es el manejo de

Formulario

medios cómo manejamos los datos del formulario cuando un usuario cambia el valor o envía el formulario de manipulación de formas. de

Veamos un ejemplo de cómo manejamos los datos de los elementos de entrada con ganchos reaccionar.

import React,{useState} from 'react';

function Form(){

const [name,setName] = useState('');
function handleNameChange(e){ setName(e.targe.value) }
function handleSubmit(e){
e.preventDefault() // stops default reloading behaviour
console.log(name); }

return (


)
}

En el código anterior, hemos establecido el atributo de valor de un elemento de entrada a la propiedad nombre y onChange método controlador de eventos se ejecuta handleNameChange en cada vez que entramos en algunos datos en el elemento de entrada, y se actualiza la propiedad de nombre usando el método setName , por lo que mantenemos sincronización con el valor reaccionan estatal (propiedad de nombre). Método

handleSubmit se utiliza para enviar el formulario.

seleccionar elemento



);
}

Aquí hemos creado una lista desplegable de los marcos de

)
}

Ahora nuestro componente LoginForm se ve mucho más limpio mediante el uso de un gancho de costumbre useInput ().

de manera similar podemos utilizar nuestro gancho useInput con otros elementos del formulario.

Radio botones ejemplo

function RadioButtons() {
const [data] = useState({male:"male",female:"female",other:"other"})
const [gender, setGender] = useInput(""); function handleSubmit(e) {
e.preventDefault();
console.log(gender);
}

return (

Select Your Gender


)
}

Textarea ejemplo elemento

function Comments(){
const [comment,setComment] = useInput(""); function handleSubmit(e) {
e.preventDefault();
console.log(comment);
}
return(


)
}