React useState 钩子附加到输入类型号而不更新鼠标滚动时的值

Question

我正在尝试一个简单的用例，其中输入类型编号的值应该使用鼠标滚动来更改。当我对输入使用 useState 挂钩时，它正在工作。值没有更新，而是页面正在滚动。不知道缺少什么。

请看示例代码块

import React from 'react'

const NumberField = () =>{

   const [inputValue, setInputValue] = useState()
 
   const handleInputChange = (event:React.ChangeEvent<HTMLInputElement>)=>{
       const value = event.target.value
       setInputValue(value)
   }

   return(
       <input type="number" value={inputValue} onChange={handleInputChange}>
   )
}

任何人都可以提供一个解决方案来更新滚动值，同时当输入字段中的值更新时页面不应该滚动。谢谢。

Answer 1

您可以使用 onWheel 事件react docs。

手轮滚动功能

const handleWheelScroll = (event:React.WheelEvent<HTMLElement>) => {
    if(event.deltaY > 0){
        setInputValue(inputValue - 1);
    }else{
        setInputValue(inputValue + 1);
    }
}

简而言之

const handleWheelScroll = (event:React.WheelEvent<HTMLElement>) => {
    setInputValue(inputValue + (event.deltaY > 0 ? -1 : 1));
}

比在你的渲染中

<input onWheel={handleWheelScroll} type="number" value={inputValue} onChange={handleInputChange} />

感谢https://stackoverflow.com/a/34147719/7645069 上下检查代码