React 中只允许输入中的数字（antd 样式）

Question

我知道 type=number 有效，但这不是我想要的。 我的 HTML：

<FormItem style={{ display: "inline-block" }}>
    {getFieldDecorator('matchPercentage', {
        initialValue: this.state.matchPercentage
     })( 
        <Input type="number" value={this.state.matchPercentage} onChange={this.handlePercentMatch} style={{ width: 100, marginLeft: 10 }} />
     )}
</FormItem>

我的功能：

handlePercentMatch = (e) => {
    const isInteger = /^[0-9]+$/;
    if (e.target.value === '' || isInteger.test(e.target.value)) {
      this.setState({ matchPercentage: e.target.value })
    }
  }

我isInteger.test()的工作意味着我只能matchPercentage在状态中获得整数。但问题是它没有反映在 GUI 中。即使它们没有被设置为状态，我仍然可以输入字母。

我知道 type="number" 有效，但这不是我想要的。我想使用 react 进行验证，因为我想控制小数和最多多少位数字和非负数

我在这里添加了我的代码 https://codepen.io/DadyByte/pen/xYgLvy?editors=1010

我找到了根本原因。如果您使用FormItem，则无论如何都可以输入。如果我Input在 FormItem 之外使用我的代码就可以了。我能做些什么来防止它

Answer 1

只需使用下面的代码，它只会接受数字，它也适用于 ant design 输入组件。

<input
    onKeyPress={(event) => {
        if (!/[0-9]/.test(event.key)) {
            event.preventDefault();
        }
    }}
/>

Answer 2

根据 www.w3schools.com，最简单且一点也不复杂的方法：

onHandleChangeNumeric = e => {
 let valu = e.target.value;

 if (!Number(valu)) {
 return;
 }

 this.setState({ [e.target.name]: valu });
};

在渲染输入上：

 <input
   type="text"
   className="form-control"
   name="someName"
   value={this.state.someName}
   onChange={this.onHandleChangeNumeric}
    />

重要：不要设置 type="number"，它不会起作用。

Answer 3

Ant Design 有一个 InputNumber 组件。你可以使用这样的东西

import {InputNumber} from 'antd';

用法

<InputNumber placeholder="Age (Max Age :100,  Min Age:1)" size={'large'} min={1} max={100} onChange={this.handleAgeChange} />

那么你的 handleAgeChange 功能可能看起来像

 handleAgeChange = (value) => {
    this.setState((prevState) => (
         { ...prevState, age:value }
    ));
};

Answer 4

嗯，这很简单，只需将type = number传递到您的输入字段即可<input value={this.state.matchPercentage} onChange={this.handlePercentMatch} type="number">