antd input 只允许输入数字和小数点

问题描述项目中需要限制 input 只能输入数字和小数点，并且限制到小数点后2位问题结果使用 Form.Item 中的 getValueFromEvent 属性，代码如下：<Form.ItemgetValueFromEvent={(e: any) => {const { value } = e.target;const tempArr = value.split('.');if (te

Velpro393

3503人浏览 · 2022-04-28 18:00:06

Velpro393 · 2022-04-28 18:00:06 发布

问题描述

项目中需要限制 input 只能输入数字和小数点，并且限制到小数点后2位

问题结果

使用 Form.Item 中的 getValueFromEvent 属性，

代码如下：

<Form.Item
  getValueFromEvent={(e: any) => {
     const { value } = e.target;
     const tempArr = value.split('.');
     if (tempArr[1]?.length) {
       return `${tempArr[0]}.${tempArr[1].slice(0, 2)}`.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g, '');
     } else {
       return value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g, '');
     }
   }}
   name="goodsPurchasePrice"
   label="成本售价"
 >
   <Input placeholder="请输入（选填）" suffix="元/箱" />
 </Form.Item>