如何在onChange时移除Chakra-UI数字输入框的默认前置零？

架构老林

2026-7-2

问题分析与解决方案

核心问题在于你把状态shareInputValue定义为数字类型，同时Input设为type="number"——当用户输入前置0时，浏览器会保留输入的字符串格式，而你转成数字后更新状态，会导致受控输入框的渲染出现不一致：数字1本该显示为"1"，但浏览器输入行为和React状态更新的时机差让显示异常。

修复步骤：

将状态初始值改为字符串类型，避免数字类型的自动格式干扰
在onChange中直接处理字符串，去除前置0后更新状态
后续需要数值时再将字符串转为数字

修复后的代码：

import { Input } from '@chakra-ui/react';
import { useState } from 'react';

const [shareInputValue, setShareInputValue] = useState("0");

<Input
    type="number"
    textAlign={'center'}
    borderRadius={0}
    border="1px solid #E2E8F0;"
    value={shareInputValue}
    onChange={e => {
        let enterValue = e.target.value;
        // 处理空值，防止输入框为空
        if (!enterValue) {
            setShareInputValue("0");
            return;
        }
        // 去除前置0，处理后为空则设为"0"
        const removeZeroStartValue = enterValue.replace(/^0+/, '') || "0";
        setShareInputValue(removeZeroStartValue);
    }}
/>