react中使用antDesign的InputInputNumber最多保留两位小数，多的小数位禁止输入，且实现输入实时校验并添加千位分隔符

在项目中有一个需求，对输入的金额需要最多保留两位小数，多的小数位禁止输入。使用网上查询的方法很多都不能实现实时校验，大多是输入的多位小数在失焦后再处理为两位小数，并不满足我这个项目的需求，经过多次改造尝试符合预期效果，特此写下笔记分享。

1.在input中实现，主要利用Form.Item自带的属性getValueFromEvent

               
                  {
                     return event.target.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); // 只能输入两位小数
                   }}
                  rules={[
                    {
                      required: true,
                      pattern: new RegExp(/^(([1-9]\d*)|\d)(\.\d{1,2})?$/, 'g'), // 只能输入数字跟小数点 两位小数
                      message: '请输入正确的金额',
                    },
                  ]}
                >
                   
                
              

实现效果：

2.在inputNumber中实现，并添加千位分隔符

ps：因为要在上面Input的校验中添加千位分隔符的效果一直没实现，就改成对InputNumber进行限制，主要是借助它的属性formatter等实现

//定义InputNumber的参数              
const NumberProps = {
    min: '0',//最小值
    max: '999999999999999.99',//最大值
    stringMode: true,//字符值模式，开启后支持高精度小数
    step: '0.01',//小数位数
    formatter: (value: any) => {//指定输入框展示值的格式
      const reg1 = `${value}`.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
      const reg = /^(\d+)\.(\d\d).*$/;
      return reg1.replace(/\B(?=(\d{3})+(?!\d))/g, ',').replace(reg, '$1.$2');
    },
  };

//在InputNumber中使用NumberProps 

             
                
                  { width: '100%' }} />
                
              

实现效果：