如何实现输入数字时自动格式化为两位小数的金额递增逻辑-js教程-PHP中文网

如何实现输入数字时自动格式化为两位小数的金额递增逻辑

本文介绍一种安全、无死循环的 react 输入处理方案：初始值为 "0.00"，首次输入（如 "1"）变为 "0.01"，二次输入（如再按 "1"）变为 "0.11"，并配合 mui textfield 与 react-number-format 实现精准金额格式化。

本文介绍一种安全、无死循环的 react 输入处理方案：初始值为 "0.00"，首次输入（如 "1"）变为 "0.01"，二次输入（如再按 "1"）变为 "0.11"，并配合 mui textfield 与 react-number-format 实现精准金额格式化。

原始代码中 handleMinChange 直接对 event.target.value 做数学运算（如 parseFloat(event.target.value * 1000)），并依赖 prevFormData.minSpend 进行链式计算，这极易引发状态更新与输入值不一致的问题——尤其在 NumericFormat 封装组件中，event.target.value 实际为格式化后的字符串（如 "$0.00" 或 "0.00"），直接乘除会导致 NaN 或意外字符串拼接，进而触发无限 re-render 循环。

根本解法在于放弃手动数值累加逻辑，转而信任用户输入的格式化结果，并仅做规范化后处理。关键思路如下：

初始状态设为 '0.00'（保持 UI 一致性），但业务逻辑中不再将其当作数值参与计算；
利用 NumericFormat 的 onValueChange 回调获取纯净数字字符串（不含 $、逗号等），即 values.value；
在 onChange 处理器中，仅对当前输入值做标准化校验：若已含两位小数（如 "0.01"），则保留原样；否则，用 parseFloat(value).toFixed(2) 补零对齐。

以下是优化后的完整实现：

Rezi.ai

Rezi.ai是一款用于创建 ATS 友好简历、求职信和求职材料的 AI 简历工具。

下载

import { useState, forwardRef } from 'react';
import { TextField } from '@mui/material';
import { NumericFormat } from 'react-number-format';
import PropTypes from 'prop-types';

const NumericFormatCustom = forwardRef(function NumericFormatCustom(props, ref) {
  const { onChange, ...other } = props;

  return (
    <numericformat getinputref="{ref}" onvaluechange="{(values)"> {
        onChange({
          target: {
            name: props.name,
            value: values.value, // ← 关键：此处 value 是纯数字字符串，如 "0", "001", "0.01"
          }
        });
      }}
      thousandSeparator
      prefix="$"
      decimalSeparator="."
      allowDecimal
      allowNegative={false}
      isAllowed={(values) => {
        const { floatValue } = values;
        return floatValue === undefined || floatValue >= 0; // 防负数
      }}
    />
  );
});

NumericFormatCustom.propTypes = {
  name: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired,
};

const Example = (props) => {
  const [formData, setFormData] = useState({
    minSpend: '0.00',
  });

  const handleMinChange = (event) => {
    const { name, value } = event.target;
    // 检查是否已含两位小数（如 "0.01", "12.50"）
    const hasTwoDecimalPlaces = /^\d*\.?\d{0,2}$/.test(value) && /\.\d{2}$/.test(value);

    setFormData((prev) => ({
      ...prev,
      [name]: hasTwoDecimalPlaces ? value : parseFloat(value || '0').toFixed(2),
    }));
  };

  return (
    <textfield fullwidth name="minSpend" label="Min Spend" value="{formData.minSpend}" onchange="{handleMinChange}" inputprops="{{" inputcomponent: numericformatcustom></textfield>
  );
};

export default Example;</numericformat>

✅ 核心改进点说明：

✅ 规避无限循环：不再在 setFormData 中读取 prevFormData.minSpend 并做算术运算，完全基于当前 value（由 NumericFormat 提供）进行格式标准化；
✅ 精准小数控制：正则 /^\d*\.?\d{0,2}$/.test(value) && /\.\d{2}$/.test(value) 确保只对合法两位小数输入放行，其余统一 toFixed(2) 补零；
✅ 健壮性增强：添加 isAllowed 钩子阻止非法输入（如多个小数点、超长小数位），value || '0' 防止空值导致 NaN；
✅ 用户体验一致：始终显示 $X.XX 格式，且输入 1 → 0.01，再输入 1 → 0.11（因 NumericFormat 自动将 "001" 解析为 "0.01"，再追加 "1" 变为 "0.11"）。

⚠️ 注意事项：