如何在ClassChange上检测转盘的当前幻灯片编号

Question

我想在幻灯片更改时检测转盘的当前幻灯片编号。我怎样才能做到这一点？。我曾在jquery中尝试过，但在类Change中坚持如何检测它。除了jquery，还有其他方法可以实现这一点吗对于Carousel，我正在使用引导程序。

更新：

转盘载玻片也在间隔5秒后自动更换

您可以查看下面的代码。https://codesandbox.io/s/sweet-sunset-ns3o1?file=/src/App.js

Answer 1

在Carousel中，调用带有onSlide事件的函数。

<Carousel onSlide={setMovieKey} />

然后在函数中，找到具有活动类名的元素，然后使用elem。ID。

const setMovieKey = () => {
const elem = document.getElementsByClassName('carousel-item active')[0]
}

Answer 2

首先，将jQuery与react一起使用首先会破坏利用react的目的。但我想使用它的决定是因为使用了普通的引导程序库。React组件不会对所做的更改做出响应；"幕后"；通过引导程序脚本。在这种情况下，表示当前幻灯片的实际状态是无法访问的，如果可能的话，尝试将其破解到组件中会非常麻烦。

我建议您切换到现有的react引导程序库之一：

• react引导
• 电抗器

这样，您就可以控制表示当前幻灯片的状态，因为它将"；活的"；在您的react结构中。

Answer 3

以下是纯javascript的解决方案：

import React, { useState, useEffect } from "react";
export default function App() {
const [slideNo, setSlideNo] = useState(1);
useEffect(()=> {
function change(slide){
setSlideNo(slides.indexOf(slide)+1)
}
let slides = document.querySelectorAll('.carousel-item');
slides = [...slides];
slides.forEach(slide => slide.addEventListener('transitionstart', () => change(slide)));
return () => {
slides.forEach(slide => slide.removeEventListener('transitionstart', ()=> change(slide)));
}


},[])

return (
<div className="App">
<div
id="carouselExampleFade"
className="carousel slide carousel-fade"
data-ride="carousel"
>
<div className="carousel-inner">
<div className="carousel-item active">
<img
className="d-block w-20"
style={{ width: "100%", height: 400 }}
src="https://images.pexels.com/photos/129208/pexels-photo-129208.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt="First slide"
/>
</div>
<div className="carousel-item">
<img
className="d-block w-100"
style={{ width: "100%", height: 400 }}
src="https://images.pexels.com/photos/705164/computer-laptop-work-place-camera-705164.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt="Second slide"
/>
</div>
<div className="carousel-item">
<img
className="d-block w-100"
style={{ width: "100%", height: 400 }}
src="https://images.pexels.com/photos/1029757/pexels-photo-1029757.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt="Third slide"
/>
</div>
</div>
<a
className="carousel-control-prev"
href="#carouselExampleFade"
role="button"
data-slide="prev"
>
<span className="carousel-control-prev-icon" aria-hidden="true" />
<span className="sr-only">Previous</span>
</a>
<a
className="carousel-control-next"
href="#carouselExampleFade"
role="button"
data-slide="next"
>
<span className="carousel-control-next-icon" aria-hidden="true" />
<span className="sr-only">Next</span>
</a>
</div>
<h4>Current Slide no. is {slideNo}</h4>
</div>
);
}