react antd InputNumber只允许输入数字的方法

一、前言

前端项目是react，使用了antd，需要一个数字输入框，只允许输入数字。

二、代码样例

import {  Form, InputNumber } from 'antd';

const FormItem = Form.Item;

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 8 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};
=============================

  //只允许整数
  limitDecimalsP = (value) => {
    let reg = /^(\d+).*$/;
    if(reg.test(value)){
      return String(value).replace(reg, '$1')
    }else{
      return ''
    }
  }
  
=============================

      

      
        
          {getFieldDecorator('id', {
            initialValue: null,
          })(
            { width: '100%' }}
              step={1}
              min={0}
              formatter={this.limitDecimalsP}
              parser={this.limitDecimalsP}
            />
          )}
        

......


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

1.这是一个表单输入框，其中，表单的提交方法是this.handleSearch(这里省略)

2.表单的样式是formItemLayout

3.这个数字输入框的key是getFieldDecorator('id',里的id，value就是自己输入的内容

4. step={1} min={0}的意思是，数字输入框的最小值是0，点击输入框右边的增加/减少按钮，一次增减1

5. formatter={this.limitDecimalsP} parser={this.limitDecimalsP}就是限制表单输入内容的方法

6.limitDecimalsP 方法中，使用了正则表达式/^(\d+).*$/，实现的效果是：
(1)当表单为空，无法输入整数以外的内容
(2)当表单存在数字，无法在数字末尾输入整数以外的内容
(3)当表单存在数字，如果在某个数字前尝试输入数字以外的内容，则从光标开始后的所有内容会被替换为空