Nur Zahlen. Eingabe von Zahlen in React

Ich versuche, Minus und Plus von der Eingabe auszuschließen, aber es geht schief:

handleChange(event) {
  const value = event.target.value.replace(/\+|-/ig, '');
  this.setState({financialGoal: value});
}

Eingabecode rendern:

<input style={{width: '150px'}} type="number" value={this.state.financialGoal} onChange={this.handleChange}/>
Erubiel
Bearbeitete Frage 27. März 2019 в 5:41
Programmierung
regex javascript reactjs
28. April 2017 в 7:53
1 Aufruf
Lösung

Ich habe versucht, Ihren Code nachzuahmen und festgestellt, dass es ein Problem in React mit <input type='number' /> gibt. Um das Problem zu umgehen, sehen Sie sich dieses Beispiel an und versuchen Sie es selbst: https://codepen.io/zvona/pen/WjpKJX?editors=0010

Sie müssen es als normale Eingabe (type='text') mit Muster nur für Zahlen definieren:

<input type="text" pattern="[0-9]*" onInput={this.handleChange.bind(this)} value={this.state.financialGoal} />

Und dann, um die Gültigkeit der Eingabe zu vergleichen:

const financialGoal = (evt.target.validity.valid) ? evt.target.value : this.state.financialGoal;

Die größte Einschränkung bei diesem Ansatz ist, wenn es um mobile --> wo Tastatur ist ' nicht in numerischen, sondern in normalen alphabetischen Format.

zvona
Bearbeitete Antwort 28. April 2017 в 8:45
Kommentare (3)

eine Code-Zeile

<input value={this.state.financialGoal} onChange={event => this.setState({financialGoal: event.target.value.replace(/\D/,'')})}/>
Kommentare (3)

  • Um die Eingabe zu beenden, verwenden Sie "onKeyPress" und nicht "onChange".

  • Die Verwendung von event.preventDefault() innerhalb von onKeyPress bedeutet, dass das Druckereignis gestoppt wird.

  • Da der keyPress-Handler vor onChange ausgelöst wird, müssen Sie die gedrückte Taste (event.keyCode) prüfen, NICHT den aktuellen Wert der Eingabe (event.target.value)

     onKeyPress(event) {
   const keyCode = event.keyCode || event.which;
   const keyValue = String.fromCharCode(keyCode);
   if (/\+|-/.test(keyValue))
     event.preventDefault();
 }

Demo unten 👇🏻

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.querySelector('#app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<section id="app"></section>
Kommentare (3)