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
- 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}"
- 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>
);
}
}