如何在没有 jquery 的情况下在 swiperjs 中单击幻灯片时获取属性

Question

我试图在 swiperJS 中单击特定卡片时获取它的值，但我没有在文档中找到是否可以这样做。

希望不要诉诸于将每张幻灯片包装在标签和输入按钮中。

我的代码在这里：

                    <Swiper
                        slidesPerView={'auto'}
                        spaceBetween={200}
                        centeredSlides={true}
                        pagination={{
                            "clickable": true
                        }}>
                        {Cards.map((card, idx) => {
                            return (
                                <div className="row" style={{ display: 'inline-block' }}>
                                    <div className="col-12 swiper-container">
                                        <SwiperSlide>
                                            <Cards
                                                number={card.number}
                                                name={card.name}
                                                expiry={card.expiry}
                                                cvc={card.cvc}
                                            // focused={focus}
                                            />
                                        </SwiperSlide>
                                    </div>
                                </div>
                            )
                        })}
                    </Swiper>

可以吗？

Answer 1

查看 swiper 的反应 source code 似乎 SwiperSlide 默认呈现为 div 节点。这个节点可以接收一个 onClick 道具，它应该执行你想要的任何功能。那看起来像这样：

<SwiperSlide onClick={()=> console.log(card.name)}>
  // ...
</SwiperSlide>

如果由于某种原因也不起作用，请考虑将 onClick 添加到已经包裹幻灯片的 div（例如 div.col-12.swiper-container）

如何在没有 jquery 的情况下在 swiperjs 中单击幻灯片时获取属性

How to get the properties when a slide is clicked in swiperjs without jquery

javascript

reactjs

swiperjs