React中无法输入数字0的问题排查及需求实现

问题根源 #

核心问题出在onChange函数里的正则处理：

text = text.replace(/^0+|0+$/g, '');

这个正则会同时删除字符串开头和结尾的所有0。比如输入"10"时，它会把末尾的0删掉，最终得到"1"，导致输入框绑定的velectricalTestingComm值被更新为"1"，所以你输入的0会被立刻清除。

另外，后续的parseFloat处理会把空字符串或者只剩0的情况转为NaN，进一步导致值无法正确保留。

解决方案 #

我们需要调整正则逻辑：只删除开头的前导0（但保留单个0的合法输入），完全保留末尾的0，同时处理空输入的边界情况。

修改onChange里的文本处理部分：

const onChange = (e) => {
    e.preventDefault();

    let text = e.target.value;
    text = text.toString().replace(/,/g, '');
    // 只删除开头的前导0，若字符串仅为0则保留
    text = text.replace(/^0+(?!$)/g, '');
    // 只保留数字字符
    text = text.replace(/[^0-9]/g, '');
    // 处理空输入，避免转为NaN
    if (!text) text = '0';
    
    var number = parseFloat(Math.round(text * 100) / 100);
    let details = calculatorDetails;
    if (!isNaN(number)) {
        if (e.target.name === "kursIDR") {
            setFormData({
                ...formData,
                [e.target.name]: number,
                ["v" + e.target.name]: text,
            });
        } else {
            setFormData({ ...formData, [e.target.name]: text })
        }
    }
};

关键修改说明 #

1. 正则替换改为/^0+(?!$)/g：
   • ^0+ 匹配开头的一个或多个0
   • (?!$) 是负向断言，确保不是整个字符串只有0的情况（比如输入"0"时不会被删除）
2. 增加空输入处理：if (!text) text = '0'，避免空字符串转为NaN，保证输入框始终有合法值
3. 非kursIDR字段的赋值改为text，确保输入的原始格式（带末尾0）被正确保存

这样修改后，输入"10"时，末尾的0会被保留，同时开头的前导0（比如输入"00123"）会被自动清理为"123"，符合你的需求。

内容的提问来源于stack exchange，提问作者Robert Chan