React Native TextInput实现千分位分隔带小数数字双状态管理

直接上可运行的实现代码，核心是分离展示态和业务态，在输入时先清洗出纯数字，再分别更新两个状态：

import React, { useState } from 'react';
import { TextInput, View } from 'react-native';

const DonationInput = () => {
  // 业务逻辑用的纯数字（原始值，不带格式）
  const [rawAmount, setRawAmount] = useState('0');
  // 用于展示的格式化值（带千分位和两位小数）
  const [formattedAmount, setFormattedAmount] = useState('0.00');

  /**
   * 格式化数字：添加千分位分隔符，保留两位小数
   * @param {string} numStr - 纯数字字符串（含小数点）
   * @returns {string} 格式化后的字符串
   */
  const formatNumber = (numStr) => {
    // 处理空值或非有效数字，默认返回0.00
    if (!numStr || numStr === '.') return '0.00';
    
    // 拆分整数和小数部分
    const [integerPart, decimalPart = ''] = numStr.split('.');
    // 整数部分添加千分位分隔符
    const formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    // 小数部分补0到两位，超过两位则截断
    const formattedDecimal = decimalPart.padEnd(2, '0').slice(0, 2);
    
    return `${formattedInteger}.${formattedDecimal}`;
  };

  /**
   * 处理输入变化：清洗输入内容，更新双状态
   * @param {string} inputText - 用户输入的原始文本
   */
  const handleInputChange = (inputText) => {
    // 只保留数字和单个小数点
    const cleanedText = inputText.replace(/[^0-9.]/g, '');
    // 确保只有一个小数点
    const singleDecimalText = cleanedText.replace(/(\..*)\./g, '$1');
    
    // 更新业务用的纯数字状态
    setRawAmount(singleDecimalText);
    // 格式化后更新展示状态
    setFormattedAmount(formatNumber(singleDecimalText));
  };

  return (
    <View>
      <TextInput
        value={formattedAmount}
        onChangeText={handleInputChange}
        keyboardType="decimal-pad"
        placeholder="请输入捐赠金额"
        style={{
          borderWidth: 1,
          borderColor: '#ccc',
          padding: 10,
          fontSize: 18,
          textAlign: 'right',
        }}
      />
      {/* 可选：展示业务用的纯数字，用于调试 */}
      {/* <Text>原始值：{rawAmount}</Text> */}
    </View>
  );
};

export default DonationInput;

关键逻辑说明 #

• 输入清洗：通过正则过滤掉非数字/小数点字符，同时限制只能有一个小数点，避免非法输入
• 格式化函数：
  • 拆分整数和小数部分，整数部分用正则/\B(?=(\d{3})+(?!\d))/g添加千分位
  • 小数部分自动补0到两位，超过两位时截断，保证始终显示两位小数
• 双状态维护：rawAmount存储纯数字字符串（比如用户输入1234时，值为"1234"），用于后续的金额计算、接口提交等业务逻辑；formattedAmount存储带格式的字符串（比如"1,234.00"），仅用于TextInput展示

边界情况处理 #

• 输入空值/仅小数点：自动显示"0.00"
• 输入".5"：格式化后为"0.50"
• 输入"123456"：格式化后为"123,456.00"
• 输入"123.456"：自动截断为"123.45"
• 删除字符时：自动同步更新两个状态，保证格式始终正确

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