如何在reactjs中僅允許文本框中的數字？

Question

如何僅允許textbox中的數字reactjs僅使用regular expression？

Answer 1

基本思路是：

使用controlled component（使用價值和輸入字段的OnChange屬性），以及裏面的onChange處理檢查輸入的值是否正確數量與否。僅當輸入的值是有效數字時更新狀態。

對於使用這種正則表達式：/[0-9]+/g;

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