如何在React Native TextInput中添加千位逗号分隔符

核心思路 #

要实现这个功能，需要区分显示格式和实际存储值：

• 输入框显示带千位逗号的格式化字符串，提升用户体验
• Formik中存储纯数字（无逗号），方便后续接口提交或数据处理

步骤1：编写数字格式化函数 #

先实现一个通用的格式化函数，把数字转换成带千位逗号的字符串：

const formatNumber = (num) => {
  if (!num) return '0';
  // 处理整数的千位分隔
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
};

// 如果需要支持小数价格，用这个版本：
// const formatNumber = (num) => {
//   if (!num) return '0';
//   const parts = num.toString().split('.');
//   parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
//   return parts.join('.');
// };

步骤2：修改TextInput的逻辑 #

不能直接使用Formik的handleChange，需要自定义输入处理逻辑，同时更新Formik的存储值和输入框的显示值：

<TextInput
  style={{ width: "auto", marginBottom: 10 }}
  mode="outlined"
  label="Starting Price"
  placeholder="25,000"
  inputMode="numeric"
  left={<TextInput.Affix text="LKR" />}
  onChangeText={(text) => {
    // 移除所有非数字字符（包括用户可能输入的逗号）
    const cleanText = text.replace(/[^0-9]/g, '');
    // 转换为数字，空输入时设为0
    const numericValue = cleanText ? parseInt(cleanText, 10) : 0;
    // 更新Formik字段的原始数值（无逗号）
    obj.setFieldValue('startingPrice', numericValue);
  }}
  // 显示格式化后的带逗号字符串
  value={formatNumber(obj.values.startingPrice)}
/>

关键说明 #

• onChangeText中先清理输入内容，确保只保留数字，再转成纯数字存入Formik，避免提交时出现逗号格式的问题
• value属性使用格式化函数处理Formik中的原始数字，实现带逗号的显示效果
• 初始默认值：因为Formik的startingPrice初始为0，formatNumber(0)会显示"0"，符合需求

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