Wie validiert Eingabeart Text mit numerischen in React?

Question

Ich habe ein Eingabefeld, das vom Typ Text ist, ich wollte nur die Zahlen eingeben und es sollte nicht mehr als die maximale Länge von 6 in reagieren. Bitte geben Sie einen Hinweis darauf.

Answer 1

Sie könnten eine Regex und eine einfache .length Validierung verwenden. Hier ein Beispiel:

class Example extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = { number: '' }; 
 
    } 
 
    handleChange(e) { 
 
    const val = e.target.value; 
 
    if (val.length <= 6 && /^(\s*|\d+)$/.test(val)) { 
 
     this.setState({ 
 
     number: val 
 
     }); 
 
    } 
 
    } 
 
    render() { 
 
    return(
 
     <input onChange={this.handleChange.bind(this)} value={this.state.number} /> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<Example/>, document.getElementById('View'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.min.js"></script> 
 

 
<div id="View"></div>

Sie auch mit der HTML5 Validierung gehen könnten, sondern nur überprüft, wenn vorgelegt wird:

<form> 
 
    <input type="number" max="999999" /> 
 
    <input type="submit" /> 
 
</form>