reactjs - 如何在reactjs中只允许文本框中出现数字？

Question

如何仅使用正则表达式在reactjs中允许文本框中的数字？

Answer 1

基本思想是:

使用controlled component (使用输入字段的 value 和 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'/>