Manejo de Formularios en React.JS

En este video veremos como crear un formulario utilizando React.js, como asociar cada uno de los campos a las variables de estado y establecer su valor con el evento onChange, que nos permitirá validar la información capturada en los campos del formulario.

Al crear un formulario con la etiqueta <form> la acción del formulario se establece con el evento onSubmit, el cual invocará una función que se encargará de realizar la validación de los campos y realizar las acciones correspondientes al objetivo del formulario:

<form onSubmit={this.onsubmit} >
</form>

En el ejemplo anterior, el formulario invoca la función o método onsubmit. Si ahora consideramos un sólo campo:

<form onSubmit={this.onsumbit}>
  <input type="text" name="nombre" value={this.state.nombre} onChange={this.handleChange} />
  <input type="submit" name="submit" value="Enviar" />
</form>

Como se observa en el ejemplo anterior, el campo es un input de tipo text cuyo nombre o name es nombre. Lo importante en los formularios con React es utilizar los atributos value y el evento onChange.

El atributo value está asignado a una variable de estado con el nombre: nombre y el evento onChange a una función o método que hemos llamado handleChange. Este método o función deberá actualizar la variable de estado cada vez que el usuario escribe un caracter o pulsa una tecla en el teclado. Es decir, cada vez que ocurre esta acción se invocará el metodo handleChange y este deberá enviar el dato capturado en el campo a la variable de estado.

handleChange(event) {
   //Obtenemos el valor capturado en el campo y lo guardamos en una variable valor
   const valor = event.target.value;
   //Mandamos el valor a la variable de estado llamada nombre
   this.setState({nombre: valor});
}

En la implementación anterior, del método handleChange, obtenermos el valor capturado en el campo y lo mandamos a la variable de estado, la cual está asignada al atributo value del campo en el formulario. Por lo tanto el valor capturado se guarda en la variable de estado y se muestra en el campo.

Cuando el usuario oprima el botón Enviar, se invocará la función onsumbit:

onsubmit(event){
   event.stopPropagation();
   event.preventDefault();
   //El valor capturado lo obtenemos de la variable de estado
   const datos = this.state.nombre;
   // En la variable datos guardamos el valor capturado en el campo del formulario
}

Cada uno de los campos se asocia a una variable de estado utilizando el atributo value del campo o input y además se agrega el evento onChange asociándolo a una función en la clase.

También podrías suscribirte al canal en Youtube

Este es el código generado en el tutorial:

	import React, {Component} from 'react';
	import {Row, Col, Form, Input, Label, FormGroup, Button, FormFeedback} from 'reactstrap';

	class App extends Component {
	constructor(props){
	super(props);

	this.state = {
	nombre: '',
	correo: '',
	edad: '',
	mensajeNombre: '',
	mensajeCorreo: '',
	mensajeEdad: '',
	invalidNombre: false,
	invalidCorreo: false,
	invalidEdad: false,
	}
	this.onChange = this.onChange.bind(this);
	this.enviarAlaBD = this.enviarAlaBD.bind(this);
	}

	onChange = e =>{
	const {name, value} = e.target;
	this.setState({
	[name]: value,
	});
	}
	enviarAlaBD = e => {
	e.preventDefault();
	let valido = true;
	if(this.state.nombre === ''){
	this.setState({
	invalidNombre: true,
	mensajeNombre: 'El campo nombre es obligatorio, indica tu nombre',
	});
	valido = false;
	}
	if(this.state.correo === ''){
	this.setState({
	invalidCorreo: true,
	mensajeCorreo: 'Indica tu direcciÃ³n de correo',
	});
	valido = false;
	}
	if(this.state.edad === ''){
	this.setState({
	invalidEdad: true,
	mensajeEdad: 'Indica tu edad',
	});
	valido = false;
	}
	if(valido){
	//Enviarlo a la base de datos o a otro componente
	console.log("Se envian los datos " + JSON.stringify(this.state));
	}
	}
	render(){
	return (
	<div>
	<Row>
	<Col xs="3"></Col>
	<Col xs="6">
	<h2>Registro de Participantes</h2>
	<Form onSubmit={this.enviarAlaBD}>
	<FormGroup>
	<Label>Nombre</Label>
	<Input type="text" name="nombre" value={this.state.nombre} onChange={this.onChange} invalid={this.state.invalidNombre} />
	<FormFeedback>{this.state.mensajeNombre}</FormFeedback>
	</FormGroup>
	<FormGroup>
	<Label>Correo</Label>
	<Input type="email" name="correo" value={this.state.correo} onChange={this.onChange} invalid={this.state.invalidCorreo}/>
	<FormFeedback>{this.state.mensajeCorreo}</FormFeedback>
	</FormGroup>
	<FormGroup>
	<Label>Edad</Label>
	<Input type="text" name="edad" className="col-2" value={this.state.edad} onChange={this.onChange} invalid={this.state.invalidEdad} />
	<FormFeedback>{this.state.mensajeEdad}</FormFeedback>
	</FormGroup>
	<FormGroup>
	<Button color="success">Guardar</Button>
	</FormGroup>
	</Form>
	</Col>
	</Row>
	</div>
	);
	}
	}

	export default App;