时间戳

首页 > 解决方案 > React useState 钩子附加到输入类型号而不更新鼠标滚动时的值

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

问题描述

我正在尝试一个简单的用例，其中输入类型编号的值应该使用鼠标滚动来更改。当我对输入使用 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}>
   )
}

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

标签： htmlreactjsreact-hooks

解决方案

您可以使用 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用于上下检查代码

推荐阅读