如何在输入框内容末尾添加货币符号？现有代码失效求解决方案

安全阿岳

2026-8-14

解决方案

你的问题出在直接把格式化后的带€符号的字符串绑定给Input的value，导致用户输入时，onChangeText拿到的是包含非数字的文本，无法正确更新shipping.price，进而引发显示异常。

解决核心是分离存储值和显示值：

存储的shipping.price保持纯数字类型，用于业务逻辑计算
Input显示格式化后的带€符号字符串，用户输入内容先过滤处理，只保留有效数字再更新存储值

步骤1：修正`handleChangePrice`处理函数

过滤输入中的非数字字符，仅保留数字和小数点，再转换为数字更新shipping.price：

const handleChangePrice = (text) => {
  // 过滤所有非数字、非小数点的字符
  const cleanedInput = text.replace(/[^0-9.]/g, '');
  // 处理空输入，避免转为NaN
  const newPrice = cleanedInput ? parseFloat(cleanedInput) : 0;
  // 更新shipping对象的price值（假设用useState管理shipping）
  setShipping(prevState => ({ ...prevState, price: newPrice }));
};

步骤2：修正Input的value绑定

对shipping.price格式化时处理空值，同时可统一小数位数：

<Input
  keyboardType='numeric'
  onChangeText={handleChangePrice}
  value={shipping.price 
    ? shipping.price.toLocaleString('de-DE', { 
        style: 'currency', 
        currency: 'EUR',
        minimumFractionDigits: 2, // 强制显示两位小数，如10→10.00€
        maximumFractionDigits: 2 
      }) 
    : ''}
/>