基本思想是：

使用受控组件（使用值和输入字段的onChange属性），并在onChange句柄内部检查输入的值是否为正确的数字。仅当输入的值是有效数字时才更新状态。

为此使用此 正则表达式 ：/^[0-9\b]+$/;

onChange处理程序将为：

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})
    }
}

工作示例：

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'/>