React？で入力された入力テキストを数値で検証する方法

Question

私はタイプのテキストの入力ボックスを持っています。私は数字を入力したいだけで、反応の最大長6を超えてはいけません。それについて少し参考にしてください。

Answer 1

正規表現と単純な.length検証を使用できます。ここでは例です：

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>

また、HTML5の検証で行くことができますが、提出され、それが唯一のチェック：

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