React 只允许用户数字键下输入

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

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

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

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