如何设置useRef的初始值< HTMLInputElement>- ReactJs + Typescript

wnavrhmk  于 2022-12-12  发布在  React
关注(0)|答案(1)|浏览(246)

我想设置一个数字作为useRef<HTMLInputElement>的初始值。
我不需要使用useState<number>(),因为该字段是一个简单的计数器。
下面是我的打印脚本代码:

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>上设置初始值?正如我所说的和你所看到的,它需要是一个数字。
这可能吗?

tvz2xvvm

tvz2xvvm1#

使用defaultValue属性设置初始值:

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

或者使用useState()并在不使用输入的情况下呈现数字:

const MyComponent = () => {

  const [productAmount, setProductAmount] = useState(0);

  const handleReduceClick = () => {
    setProductAmount(val => val - 1);
  }

  const handleAddClick = () => {
   setProductAmount(val => val + 1);
  }

  return (
    <SomeWrapper>
      <ReduceButton onClick={handleReduceClick}/>

      <div>{productAmount}</div>

      <AddButton  onClick={handleAddClick}/>
    </SomeWrapper>
  )
}

相关问题