Saltar al contenido

Reaccionar manejo tutorialNov, 1stIn este tutorial forma, vamos a aprender acerca de cómo manejar las formas …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cómo manejar las formas de reaccionar. elementos de formulario

En HTML, como entrada, área de texto y seleccionar mantienen thereown estado interno en el DOM, pero en reaccionan estamos manejando el estado en el interior del componentsand actualizar el método () estado usando setstate.

Cuando un estado de elemento de formulario es controlado por reaccionar, que se denominan componentes controlados. La mirada de

dejan entrar en los ejemplos.

elemento de entrada

class Login extends React.Component {
state = {
username: "",
password: ""
};

handleSubmit = e => {
e.preventDefault();
console.log(this.state);
};
handleUsername = e => {
this.setState({
username: e.target.value
});
};
handlePassword = e => {
this.setState({
password: e.target.value
});
};

render() {
return (




);
}
}

hay un componente Entrar con dos campos de entrada de nombre de usuario y contraseña, donde hemos añadido un controlador onChangeevent para actualizar el estado reaccionan en cada golpe de teclado.

Cuando un usuario hace clic en un botón de inicio de sesión que están registrando los datos en la consola o se puede enviar un documento a su back-end.

Textarea elemento

En reaccionar estamos asignando un estado para el valor del atributo presente en el interior del elemento de área de texto utilizando el controlador de eventos onChange estamos actualizando el estado es similar al elemento de entrada.

ejemplo:

class Comments extends React.Component {
state = {
comment:""
};

handleSubmit = e => {
e.preventDefault();
console.log(this.state);
};

handleComment = e => {
this.setState({
comment: e.target.value
});
};

render() {
return (