React仅允许用户编号keydown输入

Question

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

关于SO的常见方法之一是<input type="number" />。但是，它有两个方面：

1：箭头：我能够摆脱另一个堆叠帖子，这不是问题。 2：输入字段仍然允许负叹息“ - ”作为输入。

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

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

但这仍然允许非数字输入

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

Answer 1

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

这是非常非常基本的，没有经过测试，但会拒绝接受任何不强迫数字并保留旧价值的东西，有效地默默地丢弃任何不好的东西。它仍然会接受负数，但你可以扩展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={}从上游同步并将其作为一个真正的“受控”组件

Answer 2

尝试这样的事情：

<input
  type="number"
  min="0"
  value={this.state.number}                  
  onChange={this.handleNumberChange}
/>

handleNumberChange(e) {
    const asciiVal = e.target.value.charCodeAt(0);
    if (
      !(
        (asciiVal > 95 && asciiVal < 106) ||
        (asciiVal > 47 && asciiVal < 58) ||
        asciiVal == 8
      )
    ) {
      return false;
    }
    this.setState({ number: e.target.value });
  }

只要您尝试输入负数，它将返回false，并且不会在输入字段中设置该值