React中如何在input type='number'的onChange事件中去除数字前导零？

核心逻辑 #

在onChange事件中对输入值进行实时处理，区分空值、负数、小数、整数四种场景，精准去除前导零，同时保留合法的小数和负号，确保输入流畅性。

完整代码示例 #

import { useState } from 'react';

function NumberInput() {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (e) => {
    let rawValue = e.target.value;

    // 空值直接返回
    if (!rawValue) {
      setInputValue('');
      return;
    }

    // 标记是否为负数，分离负号与数字部分
    const isNegative = rawValue.startsWith('-');
    let numSegment = isNegative ? rawValue.slice(1) : rawValue;

    if (numSegment.includes('.')) {
      // 处理小数：拆分整数和小数部分
      const [integerPart, decimalPart] = numSegment.split('.', 2);
      // 整数部分去前导零，空则保留单个0
      const cleanedInteger = integerPart.replace(/^0+(?=\d)/, '') || '0';
      const processedNum = `${cleanedInteger}.${decimalPart}`;
      setInputValue(isNegative ? `-${processedNum}` : processedNum);
    } else {
      // 处理整数：去前导零，空则保留单个0
      const processedNum = numSegment.replace(/^0+(?=\d)/, '') || '0';
      setInputValue(isNegative ? `-${processedNum}` : processedNum);
    }
  };

  return (
    <input
      type="number"
      value={inputValue}
      onChange={handleChange}
      placeholder="请输入数字"
    />
  );
}

export default NumberInput;

关键细节说明 #

• 受控组件模式：通过useState维护输入值，确保输入框显示的是处理后的结果
• 正则匹配前导零：/^0+(?=\d)/仅匹配开头连续的零（且后面跟有数字），不会误删中间的零（如100不会变成1）
• 小数处理：保留整数部分的单个零（如000.5会转为0.5），避免出现.5这种不规范格式
• 负数兼容：单独保留负号，仅处理负号后的数字部分，确保-0042转为-42

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