React Input实现字符串显示值与数字实际值分离的方法

核心思路是分离显示值和业务值：用一个状态存纯数字（供业务逻辑使用），另一个状态存格式化后的字符串（用于输入框显示），再通过聚焦/失焦事件切换显示内容，同时处理输入过滤。

具体实现步骤 #

1. 定义双状态+聚焦标记
   在组件中维护三个状态：

   • rawNumber：存储实际业务用的纯数字（比如122333）
   • displayValue：存储格式化后的显示字符串（比如1,22,333）
   • isFocused：标记输入框是否处于聚焦状态，用于切换显示逻辑

2. 修改事件处理逻辑

   • onFocus：聚焦时切换为纯数字显示，方便用户编辑，同时可选自动选中输入内容提升体验
   • onBlur：失焦时用原生Intl.NumberFormat把纯数字格式化为印度式千分位字符串
   • onChange：过滤输入中的非数字字符，确保rawNumber始终是合法数字，同步更新显示值

3. 调整输入框类型
   聚焦时用number类型（移动端弹出数字键盘），失焦时用text类型（才能正确显示带逗号的格式化串）

完整代码示例 #

import { useState, useRef } from 'react';

function FormattedNumberInput() {
  const inputRef = useRef(null);
  // 业务用纯数字初始值
  const [rawNumber, setRawNumber] = useState(0);
  // 显示用格式化字符串
  const [displayValue, setDisplayValue] = useState('0');
  const [isFocused, setIsFocused] = useState(false);

  const handleOnChange = (e) => {
    // 过滤所有非数字字符，只保留数字
    const cleanedValue = e.target.value.replace(/[^0-9]/g, '');
    const numericValue = cleanedValue ? Number(cleanedValue) : 0;
    setRawNumber(numericValue);
    // 聚焦状态下直接显示纯数字串
    setDisplayValue(cleanedValue || '0');
  };

  const handleOnFocus = () => {
    setIsFocused(true);
    // 切换为纯数字显示
    setDisplayValue(rawNumber.toString());
    // 自动选中输入内容，方便快速编辑
    inputRef.current?.select();
  };

  const handleOnBlur = () => {
    setIsFocused(false);
    // 格式化数字为印度式千分位（如1,22,333）
    if (rawNumber === 0) {
      setDisplayValue('0');
    } else {
      const formattedStr = new Intl.NumberFormat('en-IN').format(rawNumber);
      setDisplayValue(formattedStr);
    }
  };

  // 保留原有事件处理函数（可根据实际逻辑调整）
  const keyUpHandler = (e) => {
    // 你的原有逻辑
  };

  const keyDownHandler = (e) => {
    // 你的原有逻辑
  };

  const onclick = (e) => {
    // 你的原有逻辑
  };

  return (
    <input
      ref={inputRef}
      type={isFocused ? 'number' : 'text'}
      key={'testKey'}
      onChange={handleOnChange}
      onFocus={handleOnFocus}
      onBlur={handleOnBlur}
      onKeyUp={keyUpHandler}
      onKeyDown={keyDownHandler}
      value={displayValue}
      placeholder="0"
      onClick={onclick}
    />
  );
}

关键细节说明 #

• 双状态隔离：完全区分显示和业务逻辑，避免格式化字符串干扰数字计算
• 原生格式化：用Intl.NumberFormat('en-IN')实现印度式千分位，无需额外依赖，兼容现代浏览器
• 输入防护：onChange时过滤非数字字符，确保rawNumber始终是合法数字，不会出现NaN
• 用户体验优化：聚焦自动选中内容、移动端数字键盘适配

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