仅允许onKeyPress或onKeyDown中的React中的数字

Question

我需要用户只在输入字段中输入数字。我尝试使用onKeyPress和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”。它不允许任何字母。

如果你打算使用面具，那么你可以试试this

正如您在代码片段中看到的那样，您可以使用char：9限制数字的掩码，甚至可以指定位于空格之间的char。

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"。它限制用户只写数字