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

Question

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

原文由 Soumya Behera 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

基本思路是：

使用 受控组件（使用输入字段的 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'/>

原文由 Mayank Shukla 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

毫无疑问， Mayank Shukla 提供的答案是正确的。

---

但取而代之的是，您可以只使用默认的 html 属性 type="number" 。

在这种情况下无需使用正则表达式 <input type="number" value={this.state.value} onChange={this.onChange}/> 将只接受数字。

原文由 abhishake 发布，翻译遵循 CC BY-SA 3.0 许可协议