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

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

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

               <Col span={10}>
                 <Form.Item
                  label="金额"
                  name="amount"
                  getValueFromEvent={(event: any) => {
                     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: '请输入正确的金额',
                    },
                  ]}
                >
                  <Input /> 
                </Form.Item>
              </Col>

实现效果：

如果要添加千位分隔符，可参考以下，但是需注意表单提交时需对值进行处理替换分隔符

               <Col span={10}>
                 <Form.Item
                  label="金额"
                  name="amount"
                  getValueFromEvent={(event: any) => {
                     //先替换掉千位分隔符，如果此处未替换，下面的值会混乱
                     const value = event.target.value.replace(/,/g, '');
                     //重新限制只能输入两位小数并，添加千位千位分隔符
                    return value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, '$1,');
                   }}
                  rules={[
                    {
                      required: true,
                      pattern: new RegExp(/^\d+(,\d\d\d)*.\d+$/), // 只能输入数字跟小数点及分隔符 两位小数
                      message: '请输入正确的金额',
                    },
                  ]}
                >
                  <Input /> 
                </Form.Item>
              </Col>

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

ps：对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');
      return reg1.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
      //如果不需要添加千位分隔符可以直接返回return reg1 
    },
  };

//在InputNumber中使用NumberProps 

             <Col span={10}>
                <Form.Item
                  label="金额"
                  name="amount"
                  rules={[
                    {
                      required: true,
                      message: '请输入金额',
                    },
                  ]}
                >
                  <InputNumber {...NumberProps} style={
   
   { width: '100%' }} />
                </Form.Item>
              </Col>

实现效果：