Ingrese solo números en React

1. Usar el método de patrón numérico en React
2. Utilice el método de entrada type='tel' en React
3. Usar el método de número incremental en React
4. Conclusión

Para los sitios web de comercio electrónico, donde se espera que los usuarios escriban cantidades, es un enfoque ideal para garantizar que los usuarios solo puedan escribir números. Esto también se aplica a los sitios web de llenado de formularios, aplicaciones de efectivo, aplicaciones bancarias, etc.

Existen numerosos enfoques para aplicar esta característica a una aplicación web. Veamos solo algunos de ellos.

Usar el método de patrón numérico en React

Este método tiene un enfoque bastante inverso. Se necesita que el tipo de entrada sea texto, que normalmente debería tener letras, pero la magia está configurando el patrón en solo dígitos.

En nuestra carpeta de proyecto, navegamos hasta el archivo index.js y colocamos el siguiente código:

Fragmento de código - index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      financialGoal: ''
    }
  }
  handleChange(evt) {
    const financialGoal = (evt.target.validity.valid) ? evt.target.value : this.state.financialGoal;
    this.setState({ financialGoal });
  }
  render() {
    return (
      <input type="text" pattern="[0-9]*" onInput={this.handleChange.bind(this)} value={this.state.financialGoal} />
    )
  }
}
ReactDOM.render(<Example />, document.body);

Primero, establezca el estado inicial del componente en ' ', de modo que la barra de entrada esté vacía, y luego vinculamos el componente al detector de eventos handleChange para validar que la entrada es solo un número. Entonces, cuando ingresamos caracteres en la barra de entrada, el detector de eventos se activa para verificar que lo que se ingresa es el requerido.

Producción:

Utilice el método de entrada type='tel' en React

El método de entrada de tipo 'tel' generalmente se adopta cuando se requiere que los usuarios ingresen su número de teléfono en el campo requerido. Pero este enfoque también es aplicable cuando queremos que los clientes ingresen solo números y necesitamos agregar un patrón con ciertos parámetros.

Fragmento de código - index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

class Input extends React.Component {
  state = {message: ''};
  updateNumber = (e) => {
    const val = e.target.value;
      if (e.target.validity.valid) this.setState({message: e.target.value});
      else if (val === '' || val === '-') this.setState({message: val});
  }
  render() {
    return (
      <input
        type='tel'
        value={this.state.message}
        onChange={this.updateNumber}
        pattern="^-?[0-9]\d*\.?\d*$"
       />
    );
  }
}
ReactDOM.render(<Input />, document.getElementById('main'));

Asignamos el componente updateNumber al detector de eventos onChange, de modo que cuando se escriben caracteres en el campo de entrada. El detector de eventos se activa y luego ejecuta la función de validez de destino para asegurarse de que lo que se escribe en el campo de entrada son solo números.

Producción:

Usar el método de número incremental en React

Este ejemplo permite a los usuarios elegir solo números usando las flechas hacia arriba o hacia abajo en el extremo de la barra de entrada para aumentar o disminuir los números. Este método funciona muy bien para formularios web en los que el usuario desea elegir una fecha o para situaciones de encuestas en línea.

Fragmento de código - index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const {Component} = React;
class Input extends Component {
  onKeyPress(event) {
   const keyCode = event.keyCode || event.which;
   const keyValue = String.fromCharCode(keyCode);
    if (/\+|-/.test(keyValue))
      event.preventDefault();
  }
  render() {
   return (
   <input style={{width: '150px'}} type="number" onKeyPress={this.onKeyPress.bind(this)} />
   )
}
ReactDOM.render(<Input /> , document.body);

El controlador de eventos onKeyPress se usa junto con keyCode para verificar las teclas que el usuario está presionando.

Producción:

Conclusión

La idea de crear números de campos de entrada es realmente útil para los clientes. Elimina la confusión de si podrían ingresar otros caracteres en el campo de entrada.