onKeyPressまたはonKeyDownによるReactの数字のみを許可する

Question

入力フィールドに数字だけを入力する必要があります。 onKeyPress & onKeyDownイベントを使用してみました。私はブール値のイベントを取得することができません.Anyの助けをいただければ幸いです。

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>