如何格式化MUI TextField输入，限制整数3位小数2位？

直接用字符串状态存储输入值，通过onChange事件实时过滤格式化输入，完美适配需求：

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

const FormattedNumberInput = () => {
  // 用字符串存储值，避免数字类型处理前导零、小数点的问题
  const [value, setValue] = useState('0');

  const handleInputChange = (e) => {
    let input = e.target.value;
    
    // 1. 过滤掉所有非数字、非小数点的字符
    input = input.replace(/[^0-9.]/g, '');
    // 2. 拆分整数和小数部分，确保只有一个小数点
    const [integerPart, decimalPart = ''] = input.split('.');

    // 处理整数部分：最多3位，移除前导零（单个零保留）
    let processedInteger = integerPart.replace(/^0+(?=\d)/, ''); // 0012 → 12
    if (processedInteger.length > 3) {
      processedInteger = processedInteger.slice(0, 3); // 1234 → 123
    }
    // 整数部分为空时设为0（比如用户删除所有整数内容）
    if (!processedInteger) processedInteger = '0';

    // 处理小数部分：最多保留2位
    const processedDecimal = decimalPart.slice(0, 2);

    // 拼接最终格式化值
    let formattedValue = processedInteger;
    if (processedDecimal) formattedValue += `.${processedDecimal}`;

    setValue(formattedValue);
  };

  return (
    <TextField
      label="数值输入"
      value={value}
      onChange={handleInputChange}
      type="text" // 用text类型避免number输入的默认箭头和格式限制
      variant="outlined"
    />
  );
};

export default FormattedNumberInput;

关键处理逻辑说明 #

• 输入过滤：只保留数字和单个小数点，避免非法字符输入
• 整数部分限制：
  • 自动移除前导零（如0012转为12，000保留为0）
  • 超过3位时自动截断前3位（如1234转为123）
• 小数部分限制：最多保留2位，超过部分直接截断（如123.456转为123.45）
• 边界场景处理：
  • 输入.开头自动补0（如.45转为0.45）
  • 删除所有整数内容时自动保留0，避免输入框为空
  • 支持输入过程中保留小数点（如12.），后续可继续输入小数位

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