完全可以实现这个需求——让输入值保持原始数字序列，仅在显示层做十进制格式化，同时通过输入掩码限制非数字输入。以下是基于你现有代码的修改方案：

核心思路 #

1. 替换type="number"为type="text"：数字类型输入框难以控制自定义格式化显示，且会自动转换数值类型，改用文本输入框更灵活。
2. 分离原始输入值和显示值：用状态存储用户输入的纯数字字符串（不做任何数值转换），显示时通过格式化函数转换成带千分位的十进制格式。
3. 自定义输入掩码逻辑：通过输入事件过滤非数字字符，确保用户只能输入合法数字内容。

修改后的代码示例 #

import { useState } from 'react';
import TextField from '@mui/material/TextField';
import InputAdornment from '@mui/material/InputAdornment';

const CustomNumberField = ({ startAdornment, errorMessage }) => {
  // 存储原始输入的纯数字字符串，不做数值转换
  const [rawValue, setRawValue] = useState('');

  // 格式化显示值：将原始数字字符串转为十进制格式（如 1234 → 1,234）
  const formatDisplayValue = (value) => {
    if (!value) return '';
    // 百分比场景可额外处理（比如输入1234显示12.34%，按需调整）
    if (startAdornment === 'percentage') {
      return new Intl.NumberFormat('en-US', { 
        minimumFractionDigits: 2,
        maximumFractionDigits: 2 
      }).format(Number(value) / 100);
    }
    return new Intl.NumberFormat('en-US').format(Number(value));
  };

  // 输入掩码逻辑：仅允许输入数字，过滤非数字字符
  const handleInputChange = (e) => {
    // 如需支持小数，可改为 /[^0-9.]/g，同时限制小数点数量
    const filteredValue = e.target.value.replace(/\D/g, '');
    setRawValue(filteredValue);
  };

  return (
    <TextField
      type="text"
      fullWidth
      value={formatDisplayValue(rawValue)}
      onChange={handleInputChange}
      helperText={errorMessage}
      error={!!errorMessage}
      InputProps={{
        startAdornment: startAdornment === 'percentage' && (
          <InputAdornment position="start">%</InputAdornment>
        ),
      }}
    />
  );
};

export default CustomNumberField;

关键说明 #

• 原始值保留：rawValue始终存储用户输入的纯数字字符串（比如用户输入123456，rawValue就是"123456"），不会被转换为十进制数值，提交时直接使用这个值即可。
• 显示格式化：通过Intl.NumberFormat实现原生的十进制格式展示，支持千分位、小数位数等自定义配置，适配不同地区格式需求。
• 输入掩码：handleInputChange中的正则表达式过滤掉所有非数字字符，确保输入合法性；如需支持小数，可调整正则并添加小数点数量限制逻辑。

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