时间戳

首页 > 解决方案 > React 只允许用户数字 keydown 输入

javascript - React 只允许用户数字 keydown 输入

问题描述

我试图有一个不允许用户输入数值的输入字段。（甚至不允许输入非数字或特殊字符值）。

SO 的常用方法之一是<input type="number" />. 但是，它有两个问题：

1：箭头：我可以在另一个堆栈帖子之后摆脱它，这不是问题。2：输入字段仍然允许负叹号“-”作为输入。

我也试过：<input type="text" pattern="[0-9]*" onChange={this.handleInputToken}/>

 handleInputToken(e){
    console.log(e.currentTarget.value)
  }

但这仍然允许非数字输入

是否存在允许这种简单实现的现有 npm 模块或库？因为它感觉像是表单数据非常常见的东西。

标签： javascriptreactjs

解决方案

您可以构建一个类型化的输入组件并拥有任何逻辑。

这是非常非常基本的，未经测试，但会拒绝接受任何不强制为数字并保留旧值的东西，有效地默默地丢弃任何不好的东西。它仍然会接受负数，但您可以扩展 handleChange 来修复它

class NumericInput extends React.Component {
  state = {
    value: ''
  }

  handleChange = e => {
    const { onChange } = this.props;
    const value = e.target.value.trim();
    const num = Number(value);
    let newValue = this.state.value;
    if (!isNaN(num) && value !== '') {
      newValue = num;
    }
    else if (value === ''){
      newValue = value;
    }
    this.setState({ 
      value: newValue 
    }, () => onChange && onChange(this.state.value));
  }

  render() {
    const { onChange, ...rest } = this.props;
    return <input {...rest} value={this.state.value} onChange={this.handleChange} />;
  }
}

https://codesandbox.io/s/zq5ooml10l

显然，您可以使用与上游static getDerivedStateFromProps()保持value={}同步并将其作为真正的“受控”组件

推荐阅读