输入框数字输入，整数部分用千分位表示，小数保持原样

1.参考

Antd-InputNumber

该组件存在的问题

1. 此组件中没有限制输入， 导致数字之外的字符也可以输入
2. 小数点允许重复输入，且使用千分位表示

2.设计

1. 抛弃antd-input组件，使用原生input，又因为千分位逗号生成，所以不指明type类型
2. 监听input-onChange事件，对内容进行校验及转换

3.逻辑

主要部分在设计的第二步，即功能的实现

1. 输入只能是数字和小数点

 /^([0-9](\.)|[0-9])*$/

2. 小数点只能出现一次

/^(?!.*(\.).*\1).*$/

3. 首位为0且后续跟整数，去掉首位0

/^0([0-9])*$/

value.slice(1)

4. 整数与小数部分分割，整数用千分位表示，小数保持原样

let res01 = res.split(".")[0];
let res02 = res.split(".")[1];
res = `${res01}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",") + `.${res02}`;

4.效果

5.源码

//js
//testnum 结果的带千分位的字符串
//nowtestnum 结果的数字类型
soundNumChange3 = (val) => {
    //内容值包含',' 先转为正常数字类型 默认值为0
    const value = val ? val.replace(/\$\s?|(,*)/g, "") : 0;
    let res = 0;
    let nowtestnum = 0;
    let regNum = /^([0-9](\.)|[0-9])*$/;
    let regPoint = /^(?!.*(\.).*\1).*$/;
    //1、默认最小值为0
    if (value) {
      //2、0-9数字+小数点 && 小数点只能出现一次
      if (regNum.test(value) && regPoint.test(value)) {
        //3、以0开始，首位消除0
        let regZero = /^0([0-9])*$/;
        if (regZero.test(value)) {
          res = `${value}`.slice(1);
        } else {
          res = value || 0;
        }
        nowtestnum = res;
        if (res && res.indexOf(".") > -1) {
          let res01 = res.split(".")[0];
          let res02 = res.split(".")[1];
          res = `${res01}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",") + `.${res02}`;
        } else {
          res = `${res}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        }
        this.setState({ testnum: res, nowtestnum });
      }
    } else {
      res = 0;
      this.setState({ testnum: res, nowtestnum });
    }
  };


//h5
<input style={{ display: "block", width: "400px" }} onChange={(e) => this.soundNumChange3(e.target.value)} value={testnum || 0} />