在无限循环中动态添加和删除类名称

Question

我构建了一个显示 3 张幻灯片的轮播。中间的是 100% 宽度显示，左右两个只显示宽度的 10%。

访问网站后，轮播开始自动移动：

    componentDidMount() {
        this.carouselTimer = setInterval(() => {
            this.handleButtonNext();
        }, 5000);
    }

如果我手动更改幻灯片，我会再次使用 clearInterval 和 setInterval 重置自动更改幻灯片的间隔。

为了能够添加滑动动画，我想将状态属性（leftSlide 和 rightSlide）从 false 更改为 true，然后在动画后恢复为 false。

我试图在 handleButtonNext() 方法中将属性从 false 更改为 true，在此处进行更改：

        <Slide 
                className={` ${this.state.leftSlide ? ' left-slide' : ''} ${this.state.rightSlide ? 'right-slide' : ''}`}
        ...the rest of slides.../>

我遇到的困境和目前遇到的问题是我无法以不会破坏自动播放功能的方式删除添加的 class。

我尝试使用重置方法并重新启动自动播放，但似乎没有任何解决方案有效。

在不删除添加的 class 的情况下，自动播放（以及在手动更改幻灯片的情况下重置）工作正常，但这还不够。

这是处理下一个按钮的方法：

    handleButtonNext() {
        this.setState({
            rightSlide: true
        });
        // this.wait1ms = setInterval(() => {
        // }, 1100); (useless attempt)
        this.setState({
            activeSlide: this.nextSlide()
        })
    }

    nextSlide() {
        let nextIndex = this.state.activeSlide+1;
        return (nextIndex>this.state.slides.length-1) ? 0 : nextIndex ;
    }

*The method is used here:*
    <a className="button-container right">
        <div className="carousel-button next" onClick={this.handleButtonNext}></div>
    </a>
#same for the left button

我需要说明一下，我并不精通 React，而且我对它还很陌生。感谢您抽出时间来帮助我！祝你有个愉快的一天。

L.E：我忘了说我想用 class 组件来做这件事，而不是那个函数的钩子提供。

Answer 1

The problem is that I cannot remove the added class in such a manner that it won't break the autoplay feature.

    setNextSlideStates(){
        this.setState({
            // remove rightSlide state
            rightSlide: false,
            // update the active slide state
            activeSlide: this.nextSlide()
        });
    }
    // for usert button click handler, set withAnimation to false.
    handleButtonNext(withAnimation) {
        if(this.carouselTimer) clearTimeout(this.carouselTimer)
        // if there are any animations, terminate them and call setNextSlideStates manually
        if(this.animationTimer) {clearTimeout(this.animationTimer); this.setNextSlideStates(); }
        // start the animation
        this.setState({
            rightSlide: true
        });
        // wait 1.1 sec for animation to end
        this.animationTimer = setTimeout(() => {
            this.setNextSlideStates()
            this.animationTimer = null;
            // autoplay the next slide
            this.carouselTimer = setTimeout(() => {
                this.handleButtonNext(true);
            }, 3900);
        }, withAnimation ? 1100 : 0)
    }

同时将您的 componentDidMount 更改为：

    componentDidMount() {
        this.carouselTimer = setTimeout(() => {
            this.handleButtonNext(true);
        }, 3900);
    }

按钮处理程序：

{/* no animation */}
<button onClick={() => {this.handleButtonNext(false)}}>next</button>

在无限循环中动态添加和删除类名称

Adding and removing className dynamically in an inifinite loop

classname

carousel

reactjs