仅允许Onkeypress或Onkeydown中的React中的数字

Question

我需要用户在输入字段中仅输入数字。我尝试使用OnkeyPress＆amp;Onkeydown事件。我无法获得事件的布尔值。任何帮助都将不胜感激。

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

您始终可以使用 input type =" number" 。它不允许任何字母。

如果要使用口罩，则可以尝试此

您可以在摘要中看到的，您可以用char：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>

Answer 2

使用输入type="number"。它限制了用户仅编写数字