Reactjs 物料UI转盘-带自动滚动

我正在react中构建一个carousel组件——客户端希望有一个autoscroll选项——但我关心的是干扰用户界面——应该构建什么样的逻辑来中断/暂停autoscroll，而不干扰用户尝试首先使用它。所以需要悬停检测

//原始传送带

//启用当前自动滚动选项-但忽略所有UI注意事项

此外，旋转木马在通过幻灯片后，只会在甲板上快速滑动，而无法与幻灯片对齐，因此这是另一个问题

import React, { Component } from 'react';

import Button from '@material-ui/core/Button';
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
import ChevronRightIcon from '@material-ui/icons/ChevronRight';

import './Carousel.scss';

class Carousel extends Component {
    constructor() {
      super();
      this.myRef = React.createRef();
      this.state = {
        currentSlide: 0,
        slideWidth: 0,
        slideCount: 0
      };
      this.updateDimensions = this.updateDimensions.bind(this);
      this.handleKeyPress = this.handleKeyPress.bind(this);

      this.prev = this.prev.bind(this);
      this.next = this.next.bind(this);
    }

    componentDidMount() {
      window.addEventListener("resize", this.updateDimensions);
      this.updateDimensions();

      this.setState({
        slideCount: this.props.items.length
      });

      this.autoSlide();
    }

    componentWillUnmount() {
      window.removeEventListener("resize", this.updateDimensions);
    }

    handleKeyPress(e) {
      if (e.keyCode === 39) {
        this.next();
      }
      if (e.keyCode === 37) {
        this.prev();
      }
    }

    updateDimensions(){
      //update the dimensions of the slide for responsiveness
      this.setState({
        slideWidth: this.myRef.current.getBoundingClientRect().width
      });
    }

    prev(){
      //if the current slide won't hit negative slide - change current slide
      if(this.state.currentSlide > 0){
        let prevSlide = this.state.currentSlide-1;
        this.setState({
          currentSlide: prevSlide
        });
      }
    }

    next(){
      //if the next slide will not go beyond the items - change current slide
      if(this.state.currentSlide < this.props.items.length-1){
        let nextSlide = this.state.currentSlide+1;
        this.setState({
          currentSlide: nextSlide
        });
      }
    }

    selected(slide){
      console.log(slide)
      this.setState({
        currentSlide: slide
      });
    }

    autoSlide(){
      let that = this;
      let count = this.props.items.length;

      let i = 0;
      setInterval(function(){ 
        that.selected(i);
        i++;

        if(count === i){
          i=0;//resets
        }
      }, 3000);
    }

    render() {
        return (
          <div ref={this.myRef} className="carousel" onKeyDown={this.handleKeyPress} tabIndex={-1}>
            <div className="carousel-holder">
              <div className="carousel-wrapper">
                  <div 
                    className="slide-wrapper"
                    style={{
                      left: -this.state.slideWidth*this.state.currentSlide,
                      width: this.state.slideWidth*this.state.slideCount
                    }}
                  >
                  {
                    this.props.items.map((item, j) => {
                      return(
                        <div 
                          key={j}
                          className="slide" 
                          style={{
                            width: this.state.slideWidth
                          }}               
                        >
                          <div className={"gutter " + (this.props.hasGutter? "has-gutter" : "")}>
                            {item.slide}
                          </div>
                        </div>
                      )
                    })
                  }
                  </div>
              </div>

              <Button 
                className="carousel-arrow prev-arrow"
                onClick={this.prev}
                disabled={(this.state.currentSlide === 0)}
              >
                <ChevronLeftIcon />
              </Button>

              <Button 
                className="carousel-arrow next-arrow"
                onClick={this.next}
                disabled={(this.state.currentSlide === this.props.items.length-1)}
              >
                <ChevronRightIcon />
              </Button>
            </div>

            <div className="carousel-dots">
              <ul className="dot-wrapper">
                {
                  this.props.items.map((item, x) => {
                    return (
                      <li 
                        key={x}
                        className={(this.state.currentSlide === x? "selected" : "")}
                      >
                        <Button 
                          className="dot"
                          onClick={() => this.selected(x)}
                        />
                      </li>
                    )
                  })
                }
              </ul>
            </div>
          </div>
        );
    }
}

export default Carousel;

import React，{Component}来自'React'；
从“@material ui/core/Button”导入按钮；
从“@material ui/icons/ChevronLeft”导入ChevronLeftIcon；
从“@material ui/icons/ChevronRight”导入ChevronRightIcon；
导入“/Carousel.scss”；
类Carousel扩展组件{
构造函数（）{
超级（）；
this.myRef=React.createRef（）；
此.state={
当前幻灯片：0，
滑动宽度：0，
幻灯片计数：0
};
this.updateDimensions=this.updateDimensions.bind（this）；
this.handleKeyPress=this.handleKeyPress.bind（this）；
this.prev=this.prev.bind（this）；
this.next=this.next.bind（this）；
}
componentDidMount（）{
window.addEventListener（“resize”，this.updateDimensions）；
这个.updateDimensions（）；
这是我的国家({
slideCount:this.props.items.length
});
这是autoSlide（）；
}
组件将卸载（）{
removeEventListener（“resize”，this.updateDimensions）；
}
手动按键（e）{
如果（例如keyCode===39）{
这个。下一个（）；
}
如果（例如keyCode===37）{
这是prev（）；
}
}
更新维度（）{
//更新幻灯片的尺寸以获得响应
这是我的国家({
slideWidth:this.myRef.current.getBoundingClientRect（）.width
});
}
prev（）{
//如果当前幻灯片未击中负片幻灯片-更改当前幻灯片
如果（this.state.currentSlide>0）{
设prevSlide=this.state.currentSlide-1；
这是我的国家({
当前幻灯片：上一张幻灯片
});
}
}
下一个（）{
//如果下一张幻灯片没有超出项目范围-更改当前幻灯片
if（this.state.currentSlide{
返回(
{item.slide}
)
})
}

{
this.props.items.map（（item，x）=>{
返回(

这个。选择（x）}
/>

)
})
}

);
}
}
导出默认旋转木马；

您应该创建一个布尔值

shouldAutoScroll

，它应该作为道具传递给这个旋转木马组件。最初，它的值为true，这意味着此幻灯片应根据您可以不断更改活动幻灯片的时间间隔自动滚动

当用户将鼠标悬停在图像上或单击下一个/上一个按钮时，将

shouldAutoScroll

设置为false，这意味着autoscroll的逻辑应该停止

this.state = {
      shouldAutoScroll: true,
    ...
    }

既然您已经在componentDidMount上调用了它

componentDidMount() {
    ...
    this.state.shouldAutoScroll && this.autoSlide();
  }

在

next（）

和

prev（）

上切换其值，确定用户希望控制滚动

next/prev () {
this.setState(p => p.shouldAutoScroll && ({...p, shouldAutoScroll: false}));
... // further logic
}

---

我不知道如何根据您的期望调整给定场景中的代码。但我也希望在我的旋转木马上做同样的事情。然后我发现这个可以用来显示旋转木马。我认为您也可以使用它来纠正您的问题。

您是否能够将您的解决方案调整到沙箱以进行测试？是的，您可以在此处检查它：但不起作用--我想autoScroll=true应该是您调用carosel的主页上的一个属性。-在最后一张幻灯片上，它将继续无穷大，如果我将鼠标悬停在幻灯片上，它不会停止自动滚动，如果我单击箭头，它将在再次启动自动滚动时忽略我的选择是的-在未发出请求时。我制作了自己的旋转木马，这样我就可以控制itI的响应性了。我不想无缘无故地添加一个新模块--