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

最新推荐文章于 2024-08-26 09:14:02 发布

追逐梦想永不停

最新推荐文章于 2024-08-26 09:14:02 发布

阅读量3.4k

点赞数 1

文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/bhszzy/article/details/133386418

版权

一、前言

前端项目是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 ''
    }
  }
  
=============================

      <Form {...formItemLayout} onSubmit={this.handleSearch} layout="inline">
      
        <FormItem label={'测试数字框'}>
          {getFieldDecorator('id', {
            initialValue: null,
          })(
            <InputNumber
              placeholder={'请输入数字'}
              allowClear
              autoComplete="off"
              style={{ width: '100%' }}
              step={1}
              min={0}
              formatter={this.limitDecimalsP}
              parser={this.limitDecimalsP}
            />
          )}
        </FormItem>

......
</Form>

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)当表单存在数字，如果在某个数字前尝试输入数字以外的内容，则从光标开始后的所有内容会被替换为空