2

Tengo un input en un formulario con ReactJS que sólo debe aceptar números (13 dígitos).

Soy nuevo con ReactJS y lo intente de 2 maneras pero no me funciono...

<input
     type="number"
     name="dpi_paciente"
     className="u-full-width"
     placeholder="DPI"
     onChange={actualizarState}
     value={dpi_paciente}
     maxLength="16"
/>

5 respuestas 5

3

Acá te comparto un ejemplo que cumple con lo siguiente:

  • El input solo acepta números.
  • El input solo acepta un máximo de 13 dígitos

Como tal hay dos puntos esenciales para que se cumplan estas validaciones

  1. Agregue el pattern como atributo del input lo cual me permite validar el valor en base a una expresión regular donde le indico que solo pueden ser números y un máximo de 13 dígitos.
pattern="[0-9]{0,13}"
  1. Cuando el input intenta cambiar su valor entonces se pregunta si el nuevo valor es válido.
const esValido = e.target.validity.valid;

Ejemplo online: https://codesandbox.io/s/fervent-water-2fe74

import React, { Component } from "react";
import "./styles.css";

export default class App extends Component {
  state = {
    dpi_paciente: ""
  };

  actualizarState = e => {
    const esValido = e.target.validity.valid;

    if (esValido) {
      this.setState({
        dpi_paciente: e.target.value
      });
    }
  };

  render() {
    const {
      actualizarState,
      state: { dpi_paciente }
    } = this;

    return (
      <div className="App">
        <input
          type="text"
          name="dpi_paciente"
          className="u-full-width"
          placeholder="DPI"
          value={dpi_paciente}
          pattern="[0-9]{0,13}"
          onChange={actualizarState}
        />
      </div>
    );
  }
}
2
  • 1
    Muchas gracias!
    – Geracros
    Commented el 24 feb. 2020 a las 21:07
  • lo mejor es utilizar las expresiones regulares. Commented el 25 feb. 2021 a las 16:45
1

Ya probo poner type="number"?. o puede en el metodo actualizarState validar que el ultimo elemento ingresado sea númerico

if(dpi_paciente.substr(dpi_paciente.size()-1, 1) >= 0 || dpi_paciente.substr(dpi_paciente.size()-1, 1) <= 9){ aqui actualiza el estado }

espero le ayude

1

Si agregas como atributo la siguiente funcion onKeyDown="if(this.value.length==13) return false;" vas a poder simular lo que necesitas.

<input
     type="number"
     name="dpi_paciente"
     className="u-full-width"
     placeholder="DPI"
     onKeyDown="if(this.value.length==13) return false;" 
/>

3
  • a este le entra la e. Commented el 25 feb. 2021 a las 16:43
  • @RicardoSaucedaRojas la letra 'e' en matematicas, hace refencia a un numero exponencial. No la reconoce como texto, sino que la usa para operar. Es para trabajar con numeros extremadamente grandes o extremadamente pequeños
    – Agustin G.
    Commented el 25 feb. 2021 a las 16:46
  • 1
    wow, gracias! aprecio tu comentario. Commented el 25 feb. 2021 a las 16:47
1

puedes utilizar esto dentro del componente:

onKeyDown={function (e) {
    if (e.keyCode < '48' || e.keyCode > '57') {
        e.preventDefault()
     }
 }}```
1
0

puedes usar una funcion que compruebe el tamano del valor actual del input, si es menor que 16 entonces actualizas el valor

update(event, value) {
  if (value.length <= 16) {
    setValue(value)
  }
}
<input type="number" value={value} onChange={(e,v)=> update(e,v)}/>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.