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

Posted 2021-03-29

我需要用户只在输入字段中输入数字。我尝试使用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}
 />

答案

您始终可以使用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>

另一答案

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

以上是关于仅允许onKeyPress或onKeyDown中的React中的数字的主要内容，如果未能解决你的问题，请参考以下文章

输入事件侦听器（onkeypress、onkeydown）在 Android 数字键盘中不起作用

OnKeyPress OnKeyDown区别

onkeydown-onkeypress-onkeyup

react 中 onKeyDown,onKeyUp,onKeyPress事件

OnKeyPress、onKeyDown、onKeyUp 事件在 Android 下的 Firefox/Chrome 中在键入字母时未触发

js中onkeyuponkeydown和onkeypress的区别