这里我有一个计时器分钟状态和一个滚动容器,其中状态值根据滚动位置而变化,反之亦然:
const Container = ({ minutes, setMinutes}) => {
draggableElement = useRef(null);
const handleScroll = () => {
const scrollableWidth =
draggableElement.current.container.current.scrollWidth -
draggableElement.current.container.current.offsetWidth;
const amountScrolled = draggableElement.current.scrollLeft;
const rangeValue = (amountScrolled / scrollableWidth) * 30;
setMinutes(Math.round(rangeValue));
}
useEffect(() => {
draggableElement.current.container.current.scrollLeft = minutes * 20;
}, [minutes]);
return (
<ScrollContainer
className="container"
ref={draggableElement}
onScroll={handleScroll}
id="scrolling-container"
vertical={false}
style={{
display: "grid",
gridTemplateColumns: "repeat(100, 0.25em)",
//border: "1px solid yellow",
width: "4em",
height: "50%",
alignItems: "center",
cursor: "grab",
marginBottom: "1rem",
}}
>
<Tick >1</Tick>
<Tick >2</Tick>
<Tick >3</Tick>
<Tick >4</Tick>
<Tick >5</Tick>
//more ticks here
</ScrollContainer>
);
};
最重要的是,我还有计数器按钮,您可以在其中增加/减少分钟状态值:
<AddButton onClick={()=> setMinutes(minutes + 1)}></AddButton>
<SubtractButton onClick={()=> setMinutes(minutes - 1)}></SubtractButton>
现在,一切似乎都运行良好,直到我尝试快速单击AddButton
/ SubtractButton
。我观察到以下问题:
- 如果我在不使用滚动容器的情况下快速单击它,则状态变为NaN。
- 如果我在滚动到特定位置后快速单击它,则状态值将重置为基于滚动位置的值。示例:我滚动到位置值 3,状态值变为 3。我
AddButton
快速单击,状态在一瞬间变为 4,然后重置为 3。
正如我之前提到的,如果我以缓慢的速度点击它就可以了。此外,快速滚动不会导致任何问题。
我怎样才能解决这个问题?