javascript - 在没有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>

有可能这样做吗？

标签： javascriptreactjsswiperjs

Answer 1

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

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

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