React数字输入框固定step后无法输入自定义小数位的问题

问题分析 #

你的组件存在三个核心问题：

1. useEffect中对minVal/maxVal的重复赋值导致无限循环；
2. 状态被存储为字符串类型（toFixed返回字符串），引发输入框属性逻辑混乱；
3. step=0.25限制了输入值必须为0.25的倍数，无法输入任意两位小数。

修改后的代码 #

import { useState, useEffect } from "react";

export default function App() {
  const [minVal, setMinVal] = useState(-19.0);
  const [maxVal, setMaxVal] = useState(17.65);
  const steps = 0.25;
  const [val, setVal] = useState(0);

  useEffect(() => {
    // 计算平均值并保留两位小数
    const avg = Number(((minVal + maxVal) / 2).toFixed(2));
    setVal(avg);
  }, [minVal, maxVal]);

  const onMinValChange = (e) => {
    const inputVal = parseFloat(e.target.value);
    if (!isNaN(inputVal)) {
      // 格式化到两位小数
      const formattedVal = Number(inputVal.toFixed(2));
      // 确保最小值不超过最大值
      if (formattedVal <= maxVal) {
        setMinVal(formattedVal);
      }
    }
  };

  const onMaxValChange = (e) => {
    const inputVal = parseFloat(e.target.value);
    if (!isNaN(inputVal)) {
      const formattedVal = Number(inputVal.toFixed(2));
      if (formattedVal >= minVal) {
        setMaxVal(formattedVal);
      }
    }
  };

  return (
    <div className="App">
      <p> The min value is {minVal.toFixed(2)} </p>
      <p> The max value is {maxVal.toFixed(2)} </p>
      <p> The value is {val.toFixed(2)} </p>
      <label htmlFor="min">
        Min Value:
        <input
          type="number"
          min={minVal}
          max={maxVal}
          step={steps}
          value={minVal.toFixed(2)}
          id="min"
          onChange={onMinValChange}
          inputMode="decimal"
        />
      </label>
      <label htmlFor="max">
        Max Value:
        <input
          type="number"
          min={minVal}
          max={maxVal}
          step={steps}
          value={maxVal.toFixed(2)}
          id="max"
          onChange={onMaxValChange}
          inputMode="decimal"
        />
      </label>
    </div>
  );
}

关键修改说明 #

• 消除无限循环：移除useEffect中对minVal/maxVal的重新赋值，仅计算平均值，避免依赖项循环触发更新。
• 统一状态类型：所有数值状态（minVal/maxVal/val）均保留为数值类型，避免字符串与数值混合导致的逻辑错误。
• 输入自由性保障：在onChange事件中解析输入值为浮点数，格式化到两位小数后更新状态，绕过step对键盘输入的限制，同时保留step的上下箭头步进功能。
• 边界校验：添加最小值不超过最大值、最大值不小于最小值的校验，防止非法数值输入。
• 显示格式化：所有数值通过toFixed(2)转为两位小数字符串后展示，满足显示要求。
• 输入体验优化：添加inputMode="decimal"，优化移动端小数输入体验。

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