onKeyPress 또는 onKeyDown을 사용하여 React에있는 숫자 만 허용

Question

입력 필드에 숫자 만 입력하면됩니다. onKeyPress & onKeyDown Events를 사용해 보았습니다. 부울 값을 이벤트를 얻을 수 없습니다. 감사합니다.

class User extends Component { 
    constructor (props) { 
    super(props) 
    this.state = { value: ''} 
    this.keyPress = this.keyPress.bind(this); 
    this.handleChange = this.handleChange.bind(this); 
    } 
    handleChange(e) { 
    this.setState({ value: e.target.value }); 
} 
    keyPress(e){ 
    if(e.keyCode == 13){ 
     console.log('value', e.target.value); 
     } 
    else{ 
     const charCode = (e.which) ? e.which : e.keyCode; 
     if (charCode > 31 && (charCode < 48 || charCode > 57)){ 
     return false; 
     } 
     else{ 
     return true; 
     } 
    } 
} 
<input 
type='text' 
value={this.state.value} 
onKeyDown={this.keyPress(event)} 
onChange={this.handleChange} 
/> 

Answer 1

입력 type="number"을 사용하십시오. 사용자가 숫자를 쓰는 것만으로 제한합니다.

Answer 2

입력 유형 = "숫자"을 항상 사용할 수 있습니다. 편지는 허용되지 않습니다.

당신은 당신이 문자와 숫자 마스크를 제한 할 수있는 코드에서 볼 수 있듯이 다음 this

을 시도 할 수 있습니다 마스크를 사용하려는 경우 : 9, 심지어 공간 사이에 앉아 문자를 지정합니다.

class App extends React.Component { 
 
    render() { 
 
    return <ReactInputMask mask="999 999 999" maskChar="_" />; 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, document.getElementById("root"));

<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> 
 
<!-- Will be exported to window.ReactInputMask --> 
 
<script src="https://unpkg.com/react-input-mask/dist/react-input-mask.min.js"></script> 
 

 
<div id="root"></div>