如何在React Native的TextInput中实现数值格式化（保留两位小数+千分位）

直接修改你的代码，添加数值格式化逻辑，实现输入时自动转换为带千位分隔符且保留两位小数的格式：

修改后的完整代码 #

<TextInput
  placeholder='0.00'
  keyboardType='decimal-pad'
  underlineColorAndroid="transparent"
  style={{
    width:'90%',
    fontSize: 20,
    fontWeight:'400'
  }}
  onChangeText={this.onEnterText}
  value={this.state.TextInputValue}
/>

// 辅助格式化函数
const formatNumber = (numStr) => {
  // 过滤无效字符，仅保留数字和单个小数点
  const cleaned = numStr.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
  // 分割整数与小数部分
  const [integerPart, decimalPart] = cleaned.split('.');
  // 给整数部分添加千位分隔符
  const formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  // 处理小数部分，强制保留两位，不足补0
  const formattedDecimal = decimalPart ? decimalPart.slice(0, 2).padEnd(2, '0') : '00';
  return `${formattedInteger}.${formattedDecimal}`;
}

onEnterText = (rawValue) => {
  if (!rawValue.trim()) {
    this.setState({ TextInputValue: '0.00', ErrorStatus: false });
    return;
  }
  const formattedValue = formatNumber(rawValue);
  this.setState({ TextInputValue: formattedValue, ErrorStatus: true });
}

关键改动说明 #

• 给TextInput添加value属性，绑定状态中的格式化后的值，确保输入框显示正确格式
• 替换placeholder为0.00，与最终输出格式保持一致
• 新增formatNumber辅助函数：
  • 过滤输入中的非数字、多小数点等无效内容
  • 对整数部分添加千位分隔符
  • 强制保留两位小数，不足时自动补0
• 优化空输入处理，空值时显示0.00并设置ErrorStatus为false

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