React中如何分离输入框显示值与实际值并保留精度？

你遇到的问题根源在于输入框的value直接绑定了格式化后的值，每次输入都会触发格式化覆盖掉用户正在输入的内容，自然没法连续输入数字或添加小数。要实现显示值和实际值分离且不丢失精度，核心思路是用一个状态存原始的精确输入值，另一个逻辑控制输入框的显示内容——编辑时显示用户真实输入，失焦后再格式化显示两位小数。

下面是具体实现代码：

import { useState } from 'react';

function App() {
  // 存储用户输入的原始精确值（用字符串避免数字精度丢失）
  const [rawValue, setRawValue] = useState('');
  // 标记输入框是否处于编辑状态
  const [isEditing, setIsEditing] = useState(false);

  return (
    <input
      type="text"
      // 编辑时显示原始输入，非编辑时格式化显示两位小数
      value={isEditing ? rawValue : (rawValue ? (+rawValue).toFixed(2) : '')}
      onChange={(e) => {
        // 过滤无效输入：只保留数字和一个小数点
        const input = e.target.value.replace(/[^0-9.]/g, '');
        // 确保最多只有一个小数点
        const parts = input.split('.');
        if (parts.length > 2) {
          setRawValue(`${parts[0]}.${parts.slice(1).join('')}`);
        } else {
          setRawValue(input);
        }
      }}
      onFocus={() => setIsEditing(true)}
      onBlur={() => setIsEditing(false)}
    />
  );
}

关键逻辑说明 #

• 原始值保精度：rawValue始终存储用户输入的完整内容，不管是整数、多位小数都能原样保留，不会因为提前格式化丢失精度。
• 输入过程不打断：编辑状态下显示用户真实输入，不会出现输入一半被格式化覆盖的情况，连续输入数字、添加小数点都能正常操作。
• 显示符合需求：失去焦点后自动格式化为两位小数，满足页面显示要求。

如果需要获取处理后的数值（比如提交表单时），直接用+rawValue转成数字即可，或者根据业务需求做进一步处理。

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