Wie erlaubt man nur Zahlen in Textboxen in reactjs?

Question

Wie können nur Zahlen in textbox in reactjs nur unter Verwendung von zugelassen werden?

Answer 1

Grundidee ist:

Verwendung controlled component (Gebrauchswert und onChange Eigenschaft Eingabefeld), und im Inneren onChange Griff prüfen, ob der eingegebene Wert richtige Anzahl ist oder nicht. Aktualisieren Sie den Status nur, wenn der eingegebene Wert eine gültige Zahl ist.

Für diese Verwendung dieser regex: /[0-9]+/g;

onChange Handler wird:

onChange(e){ 
    const re = /^[0-9\b]+$/; 

    // if value is not blank, then test the regex 

    if (e.target.value == '' || re.test(e.target.value)) { 
     this.setState({value: e.target.value}) 
    } 
} 

Arbeitsbeispiel:

class App extends React.Component{ 
 
    constructor(){ 
 
     super(); 
 
     this.state = {value: ''}; 
 
     this.onChange = this.onChange.bind(this) 
 
    } 
 
    
 
    onChange(e){ 
 
     const re = /^[0-9\b]+$/; 
 
     if (e.target.value == '' || re.test(e.target.value)) { 
 
     this.setState({value: e.target.value}) 
 
     } 
 
    } 
 
    
 
    render(){ 
 
    return <input value={this.state.value} onChange={this.onChange}/> 
 
    } 
 
} 
 

 
ReactDOM.render(<App/>,document.getElementById('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> 
 

 
<div id='app'/>