Eingabe nur von Zahlen in React

1. Zahlenmuster-Methode in React verwenden
2. Verwenden Sie die Eingabemethode type='tel' in React
3. Verwenden Sie die inkrementelle Zahlenmethode in React
4. Fazit

Für E-Commerce-Websites, auf denen von Benutzern erwartet wird, dass sie Beträge eingeben, ist es ein idealer Ansatz, um sicherzustellen, dass Benutzer nur Zahlen eingeben dürfen. Dies gilt auch für Websites zum Ausfüllen von Formularen, Bargeldanwendungen, Bankanwendungen usw.

Es gibt zahlreiche Ansätze, diese Funktion auf eine Webanwendung anzuwenden. Betrachten wir nur einige davon.

Zahlenmuster-Methode in React verwenden

Diese Methode verfolgt einen ziemlich umgekehrten Ansatz. Der Eingabetyp muss Text sein, der normalerweise Buchstaben annehmen sollte, aber die Magie besteht darin, das Muster nur auf Ziffern zu setzen.

In unserem Projektordner navigieren wir zur Datei index.js und fügen den folgenden Code ein:

Codeschnipsel - 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);

Setzen Sie zuerst den Anfangszustand der Komponente auf ' ', sodass die Eingabeleiste leer ist, und dann binden wir die Komponente an den Ereignis-Listener handleChange, um zu überprüfen, ob die Eingabe nur eine Zahl ist. Wenn wir also Zeichen in die Eingabeleiste eingeben, springt der Ereignis-Listener ein, um zu überprüfen, ob die Eingabe den Anforderungen entspricht.

Ausgabe:

Verwenden Sie die Eingabemethode type='tel' in React

Die Eingabemethode vom Typ 'tel' wird normalerweise verwendet, wenn Benutzer ihre Telefonnummer in das erforderliche Feld eingeben müssen. Aber dieser Ansatz ist auch anwendbar, wenn wir möchten, dass Kunden nur Zahlen eingeben und wir ein Muster mit bestimmten Parametern hinzufügen müssen.

Codeschnipsel - 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'));

Wir weisen dem Event-Listener onChange die Komponente updateNumber zu, damit beim Eintippen von Zeichen in das Eingabefeld. Der Ereignis-Listener wird ausgelöst und führt dann die Zielgültigkeitsfunktion aus, um sicherzustellen, dass nur Zahlen in das Eingabefeld eingegeben werden.

Ausgabe:

Verwenden Sie die inkrementelle Zahlenmethode in React

In diesem Beispiel können Benutzer nur Zahlen auswählen, indem sie die Aufwärts- oder Abwärtspfeile am äußersten Ende der Eingabeleiste verwenden, um die Zahlen zu erhöhen oder zu verringern. Diese Methode eignet sich hervorragend für Webformulare, bei denen der Benutzer ein Datum auswählen möchte, oder für Online-Umfragesituationen.

Codeschnipsel - 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);

Der Eventhandler onKeyPress wird zusammen mit keyCode verwendet, um zu überprüfen, welche Tasten der Benutzer drückt.

Ausgabe:

Fazit

Die Idee, Eingabefeldnummern zu erstellen, ist für Kunden sehr hilfreich. Es beseitigt die Verwirrung darüber, ob sie andere Zeichen in das Eingabefeld eingeben könnten.