时间戳

首页 > 解决方案 > 在反应类基础组件中设置 setTimeOut

javascript - 在反应类基础组件中设置 setTimeOut

问题描述

Plaese 我想在我的类基础组件中设置时间输出。尝试不同的方法，但仍然没有奏效。我希望 setTimeout 在指定秒后调用 nextClick/onClickI 但是，仍然不明白如何去做。请帮忙，如果你有一个想法。下面是组件代码...

class AbCarousel extends Component {
    state = {
        data: []
    }

    myRef = React.createRef();

    getData = async () => {
        const res = await fetch('aboutdata.json');
        const data = await res.json();
        this.setState({data: data})
    }

    componentDidMount() {
        this.getData();
    }


 prevClick = () => {
     const slide = this.myRef.current;
     slide.scrollLeft -= slide.offsetWidth;
     if (slide.scrollLeft <= -0){
         slide.scrollLeft = slide.scrollWidth; 
     }
    };


 nextClick = () => {
        const slide = this.myRef.current;
     slide.scrollLeft += slide.offsetWidth;
     if (slide.scrollLeft >= (slide.scrollWidth - slide.offsetWidth)) {
         slide.scrollLeft = 0; 
     }
    };
 
    render() {
        const { data } = this.state;
        return (
                <div className="wrapper">
                <div className="app" ref={this.myRef}>
                    <AbCard data={data} />
                </div>
                <div className="row">
                    <div className="prev" onClick={this.prevClick}>
                    <div><FaChevronLeft /></div>
                    </div>
                    <div className="next" onClick={this.nextClick}>
                    <div><FaChevronRight /></div>
                    </div>
                </div>
            </div>
        )
    }
}

export default AbCarousel

标签： javascriptreactjssettimeout

解决方案

最简单的就是更新您的onClick处理程序以setTimeout作为回调，如下所示

onClick={() => setTimeout(this.nextClick, numSeconds)

或者您可以nextClick直接更新方法并在 中使用回调函数setTimeout并环绕您希望延迟执行的代码：

 nextClick = () => {
   const slide = this.myRef.current;
     
   setTimeout(() => {
     slide.scrollLeft += slide.offsetWidth;
     if (slide.scrollLeft >= (slide.scrollWidth - slide.offsetWidth)) {
         slide.scrollLeft = 0; 
     }, numSeconds)
   }

推荐阅读