React-Bootstrap 旋转木马滑块:如何检测显示中的当前幻灯片

React-Bootstrap carousel slider: how to detect current slide in display

我有一个 bootstrap 滑块(通过库:React-Bootstrap)并且想找到一种方法来检测显示中的当前幻灯片(通过 类 代码和不是钩子)。这是 Slider 组件:

//import image1, image2, image3

class HeroSlider extends Component {

  handleSelect(){
    console.log('this sets the slide, but I just want to know the index of current slide')
  }

  render(){
  return (
    <Carousel indicators={false} controls={false} pause={false} onSelect={this.handleSelect()}>
      <Carousel.Item>
        <img className="d-block w-100" src={image1} alt="First slide" />
      </Carousel.Item>
      <Carousel.Item>
        <img className="d-block w-100" src={image2} alt="Third slide" />
      </Carousel.Item>
      <Carousel.Item>
        <img className="d-block w-100" src={image3} alt="Third slide" />
      </Carousel.Item>
    </Carousel>
  );
      }
}

export default HeroSlider

我该怎么做?谢谢。

我也建了一个,我用它做索引:

const [index, setIndex] = useState(0);

const handleSelect = (selectedIndex, e) => {
  setIndex(selectedIndex);
};

要检测当前幻灯片的样式,您可以使用 class="active carousel-item"。

好的,我是这样解决的:

react-bootstrap carousel 提供的 functions/properties 无助于检测幻灯片索引的变化,它们只允许您进行设置。

我想要一个图像背景滑块,它可以无限旋转,同时在每个图像处停止 3 秒。所以我最终只使用间隔函数将状态设置为每 3 秒更新一次索引。这是代码:

class HeroSlider extends Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      index: 0,
    };
  }
  componentDidMount() {
    this.interval = setInterval(
      () => this.setState({ index: (this.state.index + 1) % 7 }), 
      3000
    );
  }
  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render(){
  return (
    <Carousel indicators={false} controls={false} pause={false} onSelect={this.handleSelect()}>
      <Carousel.Item>
        <img className="d-block w-100" src={image1} alt="First slide" />
      </Carousel.Item>
      <Carousel.Item>
        <img className="d-block w-100" src={image2} alt="Third slide" />
      </Carousel.Item>
      <Carousel.Item>
        <img className="d-block w-100" src={image3} alt="Third slide" />
      </Carousel.Item>
    </Carousel>
  );
      }
}

export default HeroSlider

现在,如果我想检测当前滑块索引,我只需访问 this.state.index。