13 - Formularios: validación inmediata

Vimos en el concepto anterior lo usual en React es asociar a cada control de un formulario HTML un 'estado' en la componente. Esto nos permite inmediatamente se produzca el cambio reaccionar ya sea aceptando o rechazando dicho dato.

Cada vez que se realiza la carga de datos es un momento muy adecuado para implementar validaciones y no cambiar el 'estado' si los datos son incorrecto.

Problema

Confeccionar una aplicación que permita ingresar en un control 'input' de tipo 'text' solo valores binarios, es decir solo ceros y unos.

Como primer paso creamos una aplicación con create-react-app proyecto012

App.js

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      numero: ''
    };
    this.cambioNumero = this.cambioNumero.bind(this);
  }

  render() {
    return (
      <div>
        <p>Ingrese un número binario:
          <input type="text" value={this.state.numero} onChange={this.cambioNumero} />
        </p>
      </div>
    );
  }

  cambioNumero(event) {
    const entrada=event.target.value;
    let cant=0;
    for(let x=0; x<entrada.length;x++)
      if (entrada[x]==='0' || entrada[x]==='1')
        cant++;
    if (cant===entrada.length)
      this.setState( {
        numero: entrada
      })
  }
}

export default App;

Cuando ejecutamos la aplicación solo se permite el ingreso de caracteres '1' y '0':

formularios react

En el constructor inicializamos el 'estado' de la componente y asociamos el método que se ejecutará cada vez que el operador produzca un cambio en el control HTML:

  constructor(props) {
    super(props);
    this.state = {
      numero: ''
    };
    this.cambioNumero = this.cambioNumero.bind(this);
  }

En el método render() iniciamos la propiedad value del control 'input' con el 'estado' y fijamos el método que captura cambios en el control:

  render() {
    return (
      <div>
        <p>Ingrese un número binario:
          <input type="text" value={this.state.numero} onChange={this.cambioNumero} />
        </p>
      </div>
    );
  }

Finalmente el método cambioNumero controlamos que todos los caracteres cargados en el control sean '1' y '0', en caso afirmativo procedemos a modificar el 'estado' y como sabemos el 'estado' está asociado a la propiedad 'value' del control:

  cambioNumero(event) {
    const entrada=event.target.value;
    let cant=0;
    for(let x=0; x<entrada.length;x++)
      if (entrada[x]==='0' || entrada[x]==='1')
        cant++;
    if (cant===entrada.length)
      this.setState( {
        numero: entrada
      })
  }