1.参考
该组件存在的问题
- 此组件中没有限制输入, 导致数字之外的字符也可以输入
- 小数点允许重复输入,且使用千分位表示
2.设计
- 抛弃antd-input组件,使用原生input,又因为千分位逗号生成,所以不指明type类型
- 监听input-onChange事件,对内容进行校验及转换
3.逻辑
主要部分在设计的第二步,即功能的实现
- 输入只能是数字和小数点
/^([0-9](\.)|[0-9])*$/
- 小数点只能出现一次
/^(?!.*(\.).*\1).*$/
- 首位为0且后续跟整数,去掉首位0
/^0([0-9])*$/
value.slice(1)
- 整数与小数部分分割,整数用千分位表示,小数保持原样
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} />