React+TypeScript中如何为useRef<HTMLInputElement>设置初始数值？

我希望为useRef<HTMLInputElement>设置一个数值类型的初始值，由于该字段只是一个简单计数器，因此不需要使用useState<number>()。以下是我的TypeScript代码：

const MyComponent = () => {

  const productAmountRef = useRef<HTMLInputElement>();

  const handleReduceClick = () => {
    productAmountRef.current.value -= 1;
  }

  const handleAddClick = () => {
   productAmountRef.current.value += 1;
  }

  return (
    <>
      <SomeWrapper>

        <ReduceButton onClick={handleReduceClick}/>

          <input disabled={true} ref={productAmountRef}/>

        <AddButton  onClick={handleAddClick}/>


      </SomeWrapper>
    </>
  )

}

触发onClick函数时，值会变成NaN。想知道：如何为useRef<HTMLInputElement>设置初始数值？这是否可行？

问题原因 #

input元素的value属性本质是字符串类型，直接对空字符串（input初始默认值）做加减运算，会出现"" - 1 = NaN的类型错误，这就是问题根源。

可行解决方案 #

方案1：给input设初始值，操作时做类型转换 #

先给input设置初始数值的字符串形式，点击事件里把value转成数值运算后再转回字符串赋值，同时可以加边界判断防止负数：

const MyComponent = () => {
  const productAmountRef = useRef<HTMLInputElement>(null);

  const handleReduceClick = () => {
    if (!productAmountRef.current) return;
    const currentNum = Number(productAmountRef.current.value);
    productAmountRef.current.value = String(Math.max(1, currentNum - 1));
  };

  const handleAddClick = () => {
    if (!productAmountRef.current) return;
    const currentNum = Number(productAmountRef.current.value);
    productAmountRef.current.value = String(currentNum + 1);
  };

  return (
    <>
      <SomeWrapper>
        <ReduceButton onClick={handleReduceClick} />
        <input disabled={true} ref={productAmountRef} defaultValue="1" />
        <AddButton onClick={handleAddClick} />
      </SomeWrapper>
    </>
  );
};

方案2：用useRef存数值，同步到input #

更简洁的方式是直接用useRef存储数值类型的计数器，再把这个数值绑定到input的value属性上，不需要操作DOM的value，逻辑更清晰：

const MyComponent = () => {
  const productAmountRef = useRef<number>(1); // 直接存储数值

  const handleReduceClick = () => {
    productAmountRef.current = Math.max(1, productAmountRef.current - 1);
  };

  const handleAddClick = () => {
    productAmountRef.current += 1;
  };

  return (
    <>
      <SomeWrapper>
        <ReduceButton onClick={handleReduceClick} />
        <input disabled={true} value={productAmountRef.current} />
        <AddButton onClick={handleAddClick} />
      </SomeWrapper>
    </>
  );
};

总结 #

两种方案都能实现需求，方案2更符合React的状态管理逻辑，避免了频繁的类型转换，也不容易出错。如果一定要操作DOM的value，必须确保初始值非空，且每次运算都做类型转换。

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