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 proyecto013

App.js

import { useState } from 'react';

function App() {
  const [numero, setNumero] = useState('')

  function 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)
      setNumero(entrada)
  }

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

export default App;

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

Definimos el hook donde se almacenará la cadena de unos y ceros:

  const [numero, setNumero] = useState('')

En el bloque JSX iniciamos la propiedad value del control 'input' con la variable de estado 'numero' y fijamos la función que captura cambios en el control:

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

Finalmente e la función 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:

  function 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)
      setNumero(entrada)
  }