Trabajando con formularios en ReactJS
Crear formularios con RectJS es muy sencillo, solo hay que poner atención en una sola cosa, los elementos de formularios HTML funcionan de forma un poco diferente a otros elementos en el DOM con React, ya que los formularios normalmente mantienen algún estado interno de los datos, en este articulo vamos a aprender a trabajar con el estado de los formularios.
Formularios y ReactJS
Vamos a empezar a trabajar con un formulario muy simple en React (para entender su funcionamiento), como lo puede ser el de un login, el cual solo tiene dos campos para capturar información y el boton de envio.-
1
2
3
4
5
6
7
8
9
10
11
<form>
<label>
Username:
<input type="text" name="username" />
</label>
<label>
Password:
<input type="password" name="password" />
</label>
<input type="submit" value="Ingresar" />
</form>
Si utilizamos este formulario tal y como esta en un componente de Rect funciona, pero lo ideal es poder manejar el estado del formulario mediante Javascript.
Como comentaba al principio del articulo los formularios manejan su propio estado, si lo combinamos con el estado de React, podemos crear un formulario bastante robusto que cubra nuestras necesidades, a esto se le conoce como componente controlado.
Estado del formulario con elementos input
Lo primero que debemos hacer es crear un componente para nuestro formulario.-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import React, { Component } from 'react'
import { render } from 'react-dom'
class Form extends Component{
render() {
return (
<form>
<label>
Username:
<input type="text" name="username" />
</label>
<label>
Password:
<input type="password" name="password" />
</label>
<input type="submit" value="Ingresar" />
</form>
)
}
}
render(<Form/>, document.getElementById('app'));
Ahora vamos a declarar el estado del componente de la siguiente forma.-
Si no estas muy familiarizado con el estado del componente te recomiendo leer el articulo: componentes, props y estados en React
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
class Form extends Component{
// Constructor del componente
constructor(props){
super(props);
// Declaramos el estado
this.state = {username: '', password: ''};
// Agregamos this al contexto de los métodos
this.handleUsername = this.handleUsername.bind(this);
this.handlePassword = this.handlePassword.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
// Metodos para manejar el estado del formulario
handleUsername(event) {
this.setState({username: event.target.value});
}
handlePassword(event) {
this.setState({password: event.target.value});
}
handleSubmit(event) {
console.log('El usuario ' + this.state.username + ' inicio sesion');
event.preventDefault(); // Evitamos la propagación del formulario
}
// Renderizamos el componente
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Username:
<input type="text" value={this.state.username} onChange={this.handleUsername}/>
</label>
<label>
Password:
<input type="password" value={this.state.password} onChange={this.handlePassword} />
</label>
<input type="submit" value="Ingresar" />
</form>
)
}
}
Entre los cambios que hicimos en el componente, declaramos su estado dentro del constructor, el contiene dos propiedades, una para cada input de nuestro formulario.-
1
this.state = {username: '', password: ''};
Creamos los manejadores de cambio en el estado de los elementos del formulario, uno para cada uno de estos elementos y además el manejador de envio del formulario.-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Metodos para manejar el estado del formulario
// Manejador para el input de username
handleUsername(event) {
this.setState({username: event.target.value});
}
// Manejador para el input de password
handlePassword(event) {
this.setState({password: event.target.value});
}
// Manejador para el envio del formulario
handleSubmit(event) {
console.log('El usuario ' + this.state.username + ' inicio sesion');
event.preventDefault(); // Evitamos la propagación del formulario
}
Como estos manejadores estan fuera del contexto que declaramos en el constructor, utilizamos el método “bind” para agregar a su contexto el ambito de “this”.-
1
2
3
4
// Agregamos this al contexto de los métodos
this.handleUsername = this.handleUsername.bind(this);
this.handlePassword = this.handlePassword.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
Por ultimo cada uno de estos manejadores los asignamos a su respectivo elemento, por ejemplo el manejador de envio de formulario lo añadimos al evento “onSubmit()”.-
1
<form onSubmit={this.handleSubmit}>
Y a los inputs pr medio del evento “onChange()”, además, el valor lo asignamos directamente del estado del componente de React.-
1
2
<input type="text" value={this.state.username} onChange={this.handleUsername}/>
<input type="password" value={this.state.password} onChange={this.handlePassword} />
Puedes ver el ejemplo funcionando en Codepen.-
See the Pen Formularios con ReactJS by Paulo Andrade (@codeandoclub) on CodePen.
Estado del formulario con elementos textarea
1
iiii
Estado del formulario con elementos submit
1
iiii
Conclusiones
Puedes encontrar el código de ejemplo de este articulo en.-
Si te interesa el tema puedes continuar con los siguientes enlaces.-
- Articulo anterior: Manejadores de eventos con React
- Curso: Curso de React
Que tengan feliz código.