MUI TextField无法接受小数输入，提交表单报错怎么解决？

问题出在inputProps里的step设置——你写的"1.0"会让浏览器认为输入值必须是整数（step=1表示每次增减1，有效值只能是min的整数倍），所以输入2.22这类小数时，浏览器原生验证会直接判定为无效，弹出你看到的提示。

修复步骤： #

1. 修改step属性为支持两位小数的值
   把step改成"0.01"，这样浏览器会允许输入带两位小数的数值，符合单价的需求。

2. 优化输入处理逻辑（可选但推荐）
   原有的处理函数可以优化，提前拦截超过两位的小数输入，避免不必要的精度问题：

修改后的完整代码： #

TextField组件：

const [unitPrice, setUnitPrice] = useState(0);
<TextField
  label="Unit Price"
  variant="outlined"
  margin="normal"
  value={unitPrice.toString()}
  type="number"
  fullWidth
  inputProps={{
    min: "0",
    step: "0.01", // 改为0.01支持两位小数输入
  }}
  onChange={handleUnitPriceChange}
  onBlur={handleLineBlur}
/>

优化后的输入处理函数：

export const handleNumberInput = (
  number: string,
  setValue: React.Dispatch<React.SetStateAction<number>>
) => {
  // 处理空输入
  if (!number.trim()) {
    setValue(0);
    return;
  }

  // 正则截断超过两位的小数，提前限制输入格式
  const validInput = number.replace(/(\.\d{2})\d+/, '$1');
  
  const parsedValue = parseFloat(validInput);

  if (!isNaN(parsedValue)) {
    // 用Math.round保证两位小数的精度，避免toFixed的字符串转数字问题
    const roundedValue = Math.round(parsedValue * 100) / 100;
    setValue(roundedValue);
  } else {
    setValue(0);
  }
};

额外说明： #

• 如果不需要浏览器原生的数字验证，可以给TextField的inputProps加上noValidate: true，完全用自定义逻辑处理输入和验证。
• 若保留浏览器原生验证，step="0.01"是核心修复点，它会告诉浏览器两位小数的数值是合法的。

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