如何在ReactJS的文本框中仅允许数字？

  • Z时代
  • 2024-01-10
  • 分类：问答

如何只允许在数字textbox中reactjs使用regular expression而已？

回答：

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

以上是 如何在ReactJS的文本框中仅允许数字？ 的全部内容， 来源链接： utcz.com/qa/422464.html

回到顶部