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，并且不会在输入字段中设置值

反应只允许用户数字键输入

2 个答案: