React实现欧洲标准货币数字格式化及输入限制问题求助

一、限制输入框仅允许输入数字 #

针对text类型输入框，通过onChange事件实时过滤非数字字符，确保用户只能输入0-9的数字：

const InputBox = ({ value, onChange }) => {
  const handleInputChange = (e) => {
    // 移除所有非数字字符
    const numericValue = e.target.value.replace(/[^0-9]/g, '');
    onChange(numericValue);
  };

  return (
    <input
      type="text"
      value={value}
      onChange={handleInputChange}
      placeholder="输入数字"
    />
  );
};

这个逻辑会直接清除用户输入的逗号、点、字母等非数字内容，保证输入框内始终是纯数字字符串。

二、按照欧洲标准格式化货币显示 #

放弃第三方库，用浏览器原生的Intl.NumberFormat API实现，它原生支持欧洲地区的数字/货币格式（以德国地区de-DE为例，对应千位点分隔、小数逗号的规则），兼容性强且无需额外依赖：

// 格式化函数：传入纯数字字符串/数字，返回欧洲标准的欧元格式
const formatEuroCurrency = (amount) => {
  const numericAmount = Number(amount) || 0;
  return new Intl.NumberFormat('de-DE', {
    style: 'currency',
    currency: 'EUR',
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  }).format(numericAmount);
};

// 测试示例
console.log(formatEuroCurrency('154345650')); // 输出 "1.543.456,50 €"
console.log(formatEuroCurrency('1234')); // 输出 "1.234,00 €"

如果需要适配其他欧洲国家，只需把de-DE换成对应地区代码即可（如法国fr-FR，格式规则一致）。

三、完整组件整合示例 #

将输入限制与格式化逻辑结合，实现完整的货币转换组件：

import { useState } from 'react';

const CurrencyConverter = () => {
  const [inputValue, setInputValue] = useState('');
  const formattedResult = formatEuroCurrency(inputValue);

  const handleInputChange = (e) => {
    const numericValue = e.target.value.replace(/[^0-9]/g, '');
    setInputValue(numericValue);
  };

  return (
    <div>
      <label>输入金额：</label>
      <input
        type="text"
        value={inputValue}
        onChange={handleInputChange}
        placeholder="请输入数字"
      />
      <div className="formatted-output">
        格式化结果：{formattedResult}
      </div>
    </div>
  );
};

// 复用格式化函数
const formatEuroCurrency = (amount) => {
  const numericAmount = Number(amount) || 0;
  return new Intl.NumberFormat('de-DE', {
    style: 'currency',
    currency: 'EUR',
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  }).format(numericAmount);
};

export default CurrencyConverter;

内容的提问来源于stack exchange，提问作者Sofie Hilge Thygesen