寻求优雅的用户货币输入实现方案（仿Windows计算器按钮）

嘿，我完全懂你想要的那种丝滑货币输入体验——从分位开始逐步构建金额，你当前用三个状态变量分别管理整数位和两个小数位的方式确实太繁琐了，很容易写出一堆嵌套的条件判断，维护起来也麻烦。咱们换个更简洁的思路，用一个整数来存储总分数，这能让整个逻辑瞬间清晰！

为啥用整数存总分？一来可以彻底避免浮点数的精度问题（比如0.1+0.2不等于0.3的坑），二来输入逻辑会变得异常简单：每次输入数字，就把当前总分乘以10再加上新数字，完全贴合你要的“输入第一个1→0.01$，再输1→0.11$”的效果。

给你看看具体实现，用React Hooks的版本（类组件也可以直接转，逻辑一样）：

import React, { useState } from 'react';
import { View, Button, Text, StyleSheet } from 'react-native';

const CurrencyInput = () => {
  // 用整数存储总分数，初始为0代表$0.00
  const [totalCents, setTotalCents] = useState(0);

  // 处理数字输入的核心函数
  const handleNumberInput = (num) => {
    // 逻辑：当前总分 ×10 + 输入的数字 = 新的总分
    setTotalCents(prev => prev * 10 + num);
  };

  // 格式化显示：把分转换成美元，保留两位小数
  const displayAmount = `$${(totalCents / 100).toFixed(2)}`;

  // 可选：添加退格功能
  const handleBackspace = () => {
    setTotalCents(prev => Math.floor(prev / 10));
  };

  return (
    <View style={styles.container}>
      <Text style={styles.amountText}>{displayAmount}</Text>
      
      {/* 数字按钮区域 */}
      <View style={styles.buttonGrid}>
        {[1,2,3,4,5,6,7,8,9].map(num => (
          <Button
            key={num}
            title={num.toString()}
            onPress={() => handleNumberInput(num)}
            style={styles.button}
          />
        ))}
        {/* 0按钮 */}
        <Button
          title="0"
          onPress={() => handleNumberInput(0)}
          style={styles.button}
        />
        {/* 退格按钮 */}
        <Button
          title="←"
          onPress={handleBackspace}
          style={styles.button}
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
    alignItems: 'center',
  },
  amountText: {
    fontSize: 32,
    marginBottom: 30,
    fontWeight: 'bold',
  },
  buttonGrid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    width: 240,
    justifyContent: 'space-around',
  },
  button: {
    width: 70,
    marginVertical: 5,
  },
});

export default CurrencyInput;

这个方案的优势一目了然：

• 状态极简：只需要维护一个totalCents状态，不用再管什么整数位、小数第一位第二位
• 逻辑清晰：输入数字的逻辑就是简单的数学运算，没有复杂的条件判断
• 精度安全：所有计算都是整数操作，彻底规避浮点数精度问题
• 扩展性强：要加退格、清零功能都很容易，比如清零就是把totalCents设回0

如果是类组件的话，只需要把useState换成类的state就行，核心逻辑完全一致：

class CurrencyInput extends React.Component {
  state = { totalCents: 0 };

  handleNumberInput = (num) => {
    this.setState(prev => ({ totalCents: prev.totalCents * 10 + num }));
  };

  handleBackspace = () => {
    this.setState(prev => ({ totalCents: Math.floor(prev.totalCents / 10) }));
  };

  render() {
    const displayAmount = `$${(this.state.totalCents / 100).toFixed(2)}`;
    // 剩下的render内容和hooks版本一样
  }
}

试试这个方案，绝对比你之前的实现简洁太多，而且输入体验完全符合你的预期！

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