React(Material UI+TS)：TextField支持小数且维持state为数字的方案

核心思路是用两个状态分别处理输入框显示和数值存储：一个字符串状态保留用户输入的原始格式（包括"5."这类中间状态），一个数字状态存储最终的数值类型值，既满足输入体验，又保证state类型正确。

优化后的TypeScript代码：

import React from 'react';
import TextField from '@mui/material/TextField';

export default function BasicTextFields() {
  // 输入框显示用的字符串状态，支持中间输入格式
  const [inputValue, setInputValue] = React.useState<string>('0');
  // 业务逻辑用的数字类型状态，始终保持数字类型
  const [numericValue, setNumericValue] = React.useState<number>(0);

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const rawInput = event.target.value;
    // 校验输入：仅保留数字和最多一个小数点
    const validInput = rawInput
      .replace(/[^0-9.]/g, '') // 移除所有非数字、非小数点字符
      .replace(/(\..*)\./g, '$1'); // 确保只有一个小数点

    setInputValue(validInput);

    // 将合法输入转换为数字：空或纯小数点时设为0，其余转成浮点数
    const parsedNum = validInput === '' || validInput === '.' ? 0 : parseFloat(validInput);
    setNumericValue(parsedNum);
  };

  React.useEffect(() => {
    console.log('numericValue类型:', typeof numericValue, '值:', numericValue);
  }, [numericValue]);

  return (
    <TextField
      value={inputValue}
      onChange={handleChange}
      inputProps={{ inputMode: 'decimal' }} // 移动端唤起数字键盘，提升体验
      type="text" // 避免原生number输入框的格式限制
    />
  );
}

关键细节说明： #

• 双状态分离：inputValue负责渲染用户输入的内容，允许"5."这类未完成的输入；numericValue始终是数字类型，满足业务逻辑需求。
• 更强的输入校验：用正则处理输入，既拦截非法字符，又避免多个小数点的情况，同时支持粘贴内容的校验（比单纯的onKeyPress更全面）。
• 移动端适配：inputMode: 'decimal'让移动端自动唤起数字键盘，不用原生type="number"是因为原生输入框会自动去除末尾小数点，破坏输入体验。

这样既不用依赖onBlur转换类型，也能完美支持小数输入，同时保持state的数字类型。

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