antd旋转木马的缩略图单击事件
antd旋转木马的缩略图单击事件
提问于 2022-07-05 13:22:29
嗨，我所有的跟踪代码
const App = () => {
const mediaRef = useRef(null);
const navRef = useRef(null);
const [direction, setDirection] = useState(null);
const onChange = (currentSlide) => {
if (direction === "next") {
mediaRef.current.goTo(currentSlide + 1, false);
} else {
mediaRef.current.goTo(currentSlide - 1, false);
}
};
const handleNext = () => {
setDirection("next");
navRef.current.next();
};
const handlePrev = () => {
setDirection("prev");
navRef.current.prev();
};
const imageList = [ some images array ];
return (
<>
<>
<Carousel
asNavFor={navRef.current}
ref={mediaRef}
>
{imageList?.map((el, id) => (
<ImageWrapper key={id}>
<img src={el} alt={"name"} />
</ImageWrapper>
))}
</Carousel>
{imageList?.length > 1 && (
<>
<Button onClick={handlePrev}>
<LeftOutlined />
</Button>
<Button onClick={handleNext}>
<RightOutlined />
</Button>
</>
)}
</>
{imageList?.length > 1 && (
<Carousel
slidesToShow={3}
centerMode={true}
asNavFor={mediaRef.current}
ref={(carousel) => (navRef.current = carousel)}
beforeChange={onChange}
>
{imageList?.map((el, id) => (
<>
<divkey={id}>
<img src={el} alt={"name"} />
</div>
</>
))}
</Carousel>
)}
<>
<Button onClick={handlePrev}>
<LeftOutlined />
</Button>
<Button onClick={handleNext}>
<RightOutlined />
</Button>
</>
</>
);
};我正在做下面的工作，我正在使用and旋转木马为缩略图添加另一个旋转木马，并放置自定义箭头，单击next和previouse按钮，它会自动更改主图像和缩略图。
现在我试图将onClick事件放在缩略图上，我的意思是缩略图应该是可点击的，通过单击，大图像和缩略图应该被更改。我怎样才能做到这一点？
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-07-05 14:36:50
可以使用单击的id作为参数在缩略图上添加单击处理程序。
<ThumbnailWrapper key={id}>
<img
src={el}
alt={"name"}
onClick={() => thumbnailClicked(id)}
/>
</ThumbnailWrapper>然后在定义的函数中使用id执行一些操作：
const thumbnailClicked = (id) => {
console.log("thumbnail clicked:",id);
//then e.g. set parent the same as the thumbnail.
mediaRef.current.goTo(id, false);
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72870204
复制相关文章
相似问题
腾讯云开发者
