如何让输入框支持$0、$0.01及负数并保留千分位？

问题分析 #

原代码存在三个核心问题：

• 使用parseInt会丢弃小数部分，无法保留0.01这类数值
• maximumFractionDigits: 0强制隐藏小数位，不符合需求
• !!strippedFloat会把0判定为假值，导致无法保存$0的输入

修改后的代码 #

<div className="form-group has-validation col-xs-12">
    <label htmlFor="NetWorth">Net Worth</label>
    <input
        className="form-control text-right"
        id="NetWorth"
        maxLength="16"
        onChange={(e) => {
            // 只保留开头的负号、数字和一个小数点
            const cleanedValue = e.target.value.replace(/^(-)?[^0-9.]|(?<=\.)\./|(?<!^)-/g, '');
            const parsedValue = parseFloat(cleanedValue);
            // 确保0和有效数值能被正确保存，排除NaN情况
            dispatchCustomer({ 
                type: "INPUTCHANGED", 
                key: "netWorth", 
                value: !isNaN(parsedValue) ? parsedValue : null 
            })
        }}
        value={customer.netWorth !== null ?
            new Intl.NumberFormat('en-US', { 
                style: 'currency', 
                currency: "USD", 
                minimumFractionDigits: 0,
                maximumFractionDigits: 2 
            }).format(customer.netWorth) :
            ""}
    />    
</div>

关键改动说明 #

• 输入处理优化：

  • 正则表达式/^(-)?[^0-9.]|(?<=\.)\./|(?<!^)-/g确保：只允许开头一个负号、最多一个小数点、仅保留数字和合法符号
  • 用parseFloat替代parseInt，保留小数部分
  • 用!isNaN(parsedValue)判断数值有效性，避免0被错误判定为空值

• 显示格式化优化：

  • 设置minimumFractionDigits: 0和maximumFractionDigits: 2，自动适配整数（如$0）和两位小数（如$0.01）的显示
  • Intl.NumberFormat会自动为百万级数值添加千分位逗号，同时正确格式化负数（如-$1,234,567.89）

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