为何数字类型State按退格清空时变为0？有无其他解决方案？

问题背景 #

当前定义了数字类型的State：

const [constructionYear, setConstructionYear] = useState<number>(1919)

对应的输入框change事件处理函数如下：

const onConstructionYearChange = ({ currentTarget }: SyntheticEvent<HTMLInputElement>) => {
    const value = currentTarget.value

    const currentYear = new Date().getFullYear()
    const isValidValue = isInteger(String(value)) && +value <= currentYear

    if (isValidValue) {
      currentTarget.setCustomValidity("")
      setConstructionYear(+value)
    } else {
      currentTarget.setCustomValidity("请输入有效的年份")
      currentTarget.reportValidity()
    }
}

遇到的问题：按退格键清空输入框时，State会被自动转为0，希望实现用户能完全清空输入字段，但不想将State类型修改为number|string。

解决方案：将State类型改为number | null #

无需引入string类型，只需调整State的类型为number | null，并修改事件处理逻辑和输入框的value绑定即可：

1. 修改State定义 #

const [constructionYear, setConstructionYear] = useState<number | null>(1919)

2. 更新事件处理函数 #

const onConstructionYearChange = ({ currentTarget }: SyntheticEvent<HTMLInputElement>) => {
    const value = currentTarget.value.trim()
    const currentYear = new Date().getFullYear()

    // 优先处理输入框为空的情况
    if (!value) {
        currentTarget.setCustomValidity("")
        setConstructionYear(null)
        return
    }

    const numValue = +value
    const isValidValue = Number.isInteger(numValue) && numValue <= currentYear

    if (isValidValue) {
        currentTarget.setCustomValidity("")
        setConstructionYear(numValue)
    } else {
        currentTarget.setCustomValidity("请输入有效的年份")
        currentTarget.reportValidity()
    }
}

3. 输入框value绑定 #

将输入框的value绑定为constructionYear ?? ""，这样当State为null时，输入框显示为空：

<input
    type="text"
    value={constructionYear ?? ""}
    onChange={onConstructionYearChange}
/>

方案说明 #

• 用null表示输入框清空的状态，既避免了引入string类型，又保持了State的数值语义
• 输入框通过?? ""的空值合并操作，在State为null时显示空字符串，符合用户清空输入的预期
• 事件处理中优先判断空输入，直接将State设为null，避免了空字符串转数字导致的0值问题

内容的提问来源于stack exchange，提问作者Ala Eddine Menai