Добавление и удаление className динамически в бесконечном цикле

Question

Я построил карусель, отображающую 3 слайда. В то время как центральная часть имеет ширину 100%, левая и правая видны только на 10% ширины.

После доступа к веб-сайту карусель начинает двигаться автоматически, используя это:

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

И если я вручную изменяю слайд, я сбрасываю интервал, который меняет слайды автоматически, используя clearInterval и setInterval снова.

Чтобы иметь возможность добавить скользящую анимацию, я хочу изменить свойства состояния ( leftSlide & rightSlide) с false на true, а после анимации обратно на false.

Я попытался изменить свойства с false на true внутри handleButtonNext () метод вносит изменения здесь:

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

Дилемма, с которой я столкнулся, и проблема, с которой я столкнулся до сих пор, заключается в том, что я не могу удалить добавленный класс таким образом, чтобы он не нарушил функцию автовоспроизведения.

Я попытался использовать сброс метод и перезапуск автовоспроизведения, но решение, похоже, не работает.

Без удаления добавленного c Милая, автовоспроизведение (и сброс в случае смены слайдов вручную) работает нормально, но этого недостаточно.

Это метод, который обрабатывает следующую кнопку:

    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 и довольно новичок в этом. Спасибо за время, которое вы уделили мне, чтобы помочь! Желаю sh вам отличного дня.

ЛЭ: Я забыл упомянуть, что я хотел бы сделать это, используя компонент class , а не хуки, которые предоставляет функция.

Answer 1

Проблема в том, что я не могу удалить добавленный класс таким образом, чтобы он не нарушил функцию автовоспроизведения.

    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>