按住按钮可连续滚动ReactJS

Question

i have two buttons left and right to a div, this div has a scroll bar and all i want to do is , when holding one the the buttons for 1000ms .. the scrollbar moves continously (Like the default implementation in our browsers) i know how to use setTimeout! but the problem is inside the function

Inside the class

holdRightButton = () => {
     // i want to use this element :
     // const slider : HTMLElement = this.state.scrollRef.current;
     this.setState({
        timer : setTimeout(() => {

        }, 1000)
      })
    }
releaseButton = () => {
    clearTimeout(this.state.timer);
}

Inside render():

<Button onMouseDown={this.holdRightButton}
onMouseUp={this.releaseButton}>
          <span className="fas fa-chevron-right" /> 
</Button>

i tried to do for example Element.ScrollBy(1, 0) but you know .. it will execute it only 1 time i also tried a boolean that turns to False when event onMouseUp is sent but the application crashes Any solution ? even if it is totally different

Answer 1

setTimeout do something only one time.

Please use setInterval and clearInterval

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval