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

wnavrhmk 于 2022-12-12 发布在 React

关注(0)|答案(1)|浏览(245)

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

reactjs

来源：https://stackoverflow.com/questions/74753348/how-to-set-initial-value-on-userefhtmlinputelement-reactjs-typescript

1条答案

按热度按时间

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>
  )
}

赞(0）回复(0）举报 2022-12-12

我来回答

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

1条答案

相关问题

热门标签

最新问答