0

这里我有一个计时器分钟状态和一个滚动容器,其中状态值根据滚动位置而变化,反之亦然:

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。我观察到以下问题:

  1. 如果我在不使用滚动容器的情况下快速单击它,则状态变为NaN
  2. 如果我在滚动到特定位置后快速单击它,则状态值将重置为基于滚动位置的值。示例:我滚动到位置值 3,状态值变为 3。我AddButton快速单击,状态在一瞬间变为 4,然后重置为 3。

正如我之前提到的,如果我以缓慢的速度点击它就可以了。此外,快速滚动不会导致任何问题。

我怎样才能解决这个问题?

4

0 回答 0