React数字输入框强制保留两位小数：step属性未生效问题

嘿，这个问题我之前也碰到过！原生number输入框的step="0.01"确实只会限制输入的步进值，但不会帮你自动把整数格式化为x.00的形式——React的受控组件模式下，我们得自己接管输入和格式化的逻辑才行。

我推荐用受控组件+文本输入框的方案，相比原生number输入框，它的可控性更强，能完美实现“限制两位小数+始终显示两位小数”的需求。下面是完整的实现代码：

import { useState } from 'react';

const TwoDecimalNumberInput = () => {
  // 初始化值为0.00，确保初始显示就是两位小数
  const [inputValue, setInputValue] = useState('0.00');

  const handleInputChange = (e) => {
    let rawValue = e.target.value;
    
    // 第一步：过滤非法字符，只保留数字和一个小数点
    rawValue = rawValue.replace(/[^0-9.]/g, '');
    
    // 第二步：确保输入中最多只有一个小数点
    const valueParts = rawValue.split('.');
    if (valueParts.length > 2) {
      rawValue = `${valueParts[0]}.${valueParts[1]}`;
    }
    
    // 第三步：限制小数点后最多两位
    if (valueParts.length === 2 && valueParts[1].length > 2) {
      rawValue = `${valueParts[0]}.${valueParts[1].slice(0, 2)}`;
    }
    
    // 实时更新输入值（此时整数会显示为3，而非3.00，失去焦点时再格式化）
    setInputValue(rawValue);
  };

  const handleInputBlur = () => {
    // 失去焦点时，强制格式化为两位小数
    const numericValue = parseFloat(inputValue) || 0;
    setInputValue(numericValue.toFixed(2));
  };

  return (
    <input
      type="text"
      value={inputValue}
      onChange={handleInputChange}
      onBlur={handleInputBlur}
      placeholder="请输入数字"
      style={{ padding: '8px', fontSize: '16px' }}
    />
  );
};

export default TwoDecimalNumberInput;

关键逻辑说明： #

• 输入过滤：通过正则表达式/[^0-9.]/g过滤掉所有非数字、非小数点的字符，避免用户输入无效内容。
• 小数点限制：拆分输入值，确保最多只有一个小数点，且小数点后不超过两位。
• 失去焦点格式化：用户输入整数（比如3）时，实时输入阶段保留原样方便操作，失去焦点后自动转为3.00，兼顾输入效率和显示规范。

如果你坚持要用原生type="number"的输入框，也可以这样实现（体验稍差，但能满足需求）：

import { useState } from 'react';

const NumberTypeTwoDecimalInput = () => {
  const [value, setValue] = useState(0.00);

  const handleChange = (e) => {
    const num = parseFloat(e.target.value);
    if (!isNaN(num)) {
      setValue(num);
    }
  };

  const handleBlur = () => {
    setValue(prev => parseFloat(prev.toFixed(2)));
  };

  return (
    <input
      type="number"
      step="0.01"
      value={value}
      onChange={handleChange}
      onBlur={handleBlur}
    />
  );
};

export default NumberTypeTwoDecimalInput;

不过这种方式下，用户输入3时，输入框会显示3直到失去焦点才变成3.00，不如text输入框的体验流畅。

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