React数字输入框货币格式化后无法更新值问题求助

核心问题分析 #

1. 输入框类型限制：你使用了type="number"的输入框，这类输入框仅接受纯数字（含小数点），带逗号的格式化字符串不属于合法数字值，因此无法渲染到输入框中。
2. 非受控组件写法：defaultValue是一次性赋值逻辑，后续状态更新不会同步到输入框，需要改为受控组件用value绑定状态。

修正后的组件代码 #

import { useState } from 'react';
import './InputCurrency.css';

function InputCurrency(props) {
    // 保存格式化后的货币字符串（用于显示）
    const [formattedCurrency, setFormattedCurrency] = useState('');
    // 保存用户输入的原始数字（用于编辑逻辑）
    const [rawNumber, setRawNumber] = useState('');

    const formatCurrency = (num) => {
        if (!num) {
            setFormattedCurrency('0.00');
            return;
        }
        // 处理非数字输入，默认转为0
        const parsedNum = parseFloat(num) || 0;
        // 格式化：保留两位小数+添加千分位逗号
        const formatted = parsedNum.toFixed(2).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
        setFormattedCurrency(formatted);
    };

    return (
        <div>
            <input
                id="inputNumber"
                type="text"
                value={formattedCurrency}
                onChange={(e) => {
                    // 过滤非法字符，只保留数字和小数点
                    const inputValue = e.target.value.replace(/[^0-9.]/g, '');
                    setRawNumber(inputValue);
                    // 实时显示原始输入值，也可改为仅在blur时格式化
                    setFormattedCurrency(inputValue);
                }}
                onBlur={() => formatCurrency(rawNumber)}
                placeholder='0.00'
            />
        </div>
    );
}

export default InputCurrency;

关键改动说明 #

• 输入框类型改为text：解除数字输入框的字符限制，允许显示带逗号的格式化字符串。
• 双状态管理：用rawNumber保存用户输入的原始值，保证编辑时的正常输入逻辑；用formattedCurrency保存格式化结果，用于输入框显示。
• 受控组件绑定：输入框value直接绑定formattedCurrency，状态更新会立即同步到输入框。
• 输入过滤：在onChange中过滤非数字/非小数点字符，避免用户输入非法内容。
• 边界处理：空值或非数字输入时自动转为0.00，避免出现NaN异常。

补充优化点 #

如果需要支持用户在格式化后的字符串上直接编辑，可以在onChange中先移除已有逗号再处理输入：

onChange={(e) => {
    // 先移除已有的逗号，再过滤非法字符
    const inputValue = e.target.value.replace(/,/g, '').replace(/[^0-9.]/g, '');
    setRawNumber(inputValue);
    setFormattedCurrency(inputValue);
}}

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