Saisir uniquement des nombres dans React

1. Utiliser la méthode du modèle de nombre dans React
2. Utiliser la méthode Input type='tel' dans React
3. Utiliser la méthode des nombres incrémentiels dans React
4. Conclusion

Pour les sites Web de commerce électronique, où les utilisateurs sont censés saisir des montants, il s’agit d’une approche idéale pour s’assurer que les utilisateurs ne sont autorisés à saisir que des chiffres. Cela est également vrai pour les sites Web de remplissage de formulaires, les applications de trésorerie, les applications bancaires, etc.

Il existe de nombreuses approches pour appliquer cette fonctionnalité à une application Web. Examinons-en seulement quelques-uns.

Utiliser la méthode du modèle de nombre dans React

Cette méthode adopte une approche assez inversée. Il faut que le type d’entrée soit du texte, qui devrait normalement prendre des lettres, mais la magie définit le modèle uniquement sur des chiffres.

Dans notre dossier de projet, nous naviguons jusqu’au fichier index.js et mettons le code suivant :

Extrait de code - 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);

Tout d’abord, définissez l’état initial du composant sur ' ', de sorte que la barre de saisie soit vide, puis nous lions le composant à l’écouteur d’événement handleChange pour valider que l’entrée est un nombre uniquement. Ainsi, lorsque nous saisissons des caractères dans la barre de saisie, l’écouteur d’événement se déclenche pour vérifier que ce qui est saisi est conforme aux besoins.

Production:

Utiliser la méthode Input type='tel' dans React

Le mode de saisie de type 'tel' est généralement adopté lorsque les utilisateurs sont amenés à saisir leur numéro de téléphone dans le champ requis. Mais cette approche est également applicable lorsque nous voulons que les clients saisissent de simples chiffres et que nous devons ajouter un modèle avec certains paramètres.

Extrait de code - 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'));

Nous attribuons le composant updateNumber à l’écouteur d’événement onChange, de sorte que lorsque des caractères sont saisis dans le champ de saisie. L’écouteur d’événement est déclenché, puis exécute la fonction de validité cible pour s’assurer que ce qui est saisi dans le champ de saisie ne sont que des nombres.

Production:

Utiliser la méthode des nombres incrémentiels dans React

Cet exemple permet aux utilisateurs de sélectionner uniquement des nombres en utilisant les flèches vers le haut ou vers le bas à l’extrémité de la barre de saisie pour augmenter ou diminuer les nombres. Cette méthode fonctionne très bien pour les formulaires Web où l’utilisateur souhaite choisir une date ou pour les situations de sondage en ligne.

Extrait de code - 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);

Le gestionnaire d’événements onKeyPress est utilisé avec keyCode pour vérifier les touches sur lesquelles l’utilisateur appuie.

Production:

Conclusion

L’idée de créer des numéros de champ de saisie est vraiment utile pour les clients. Cela élimine la confusion quant à savoir s’ils pouvaient saisir d’autres caractères dans le champ de saisie.