如何在react slick中使用onClick

Question

我在我的网站上使用react slick。我有4张幻灯片。每张幻灯片，我都想要一个onClick函数来获取值。但是当我点击幻灯片时，我只得到最后一个值。我搜索Stack Overflow，但找不到解决方案。

代码如下:

const productSlideImg = [
{ Img: prodImg1, ImgName: "img1", pageLink: "/home" },
{ Img: prodImg2, ImgName: "img2", pageLink: "/about" },
{ Img: prodImg3, ImgName: "img3", pageLink: "/contact" }
];

const handleClickSlide = (item) => {
console.log(item); // getting "img3" only on every slide click
};

<Slider
autoplay={true}
slidesToShow={1}
slidesToScroll={1} >
{productSlideImg.map((item, index) => (
<div   >
<img
style={{ borderRadius: "50px" }}
width={"100%"}
src={item.Img}
onClick={() => {handleClickSlide(item.ImgName) }}

/>
</div>
))}
</Slider>

请帮我解决一下

Answer 1

您已经创建了一个不同的函数handleclickproducts并在img onClick上使用不同的功能

onClick={() => {handleClickProduts (item.ImgName) }}

CodeBox link: working code

Answer 2

我找到了解决方案，希望看到这篇文章的人会觉得有帮助。所以我在react slick props设置中使用了fade=true删除了RESOLVED这是我的问题。见附图

Answer 3

我认为你的问题是，当你使用array.map在反应你需要添加关键属性。在你的例子中，你需要像这样在div中添加键:

<Slider autoplay={true} slidesToShow={1} slidesToScroll={1}>
{productSlideImg.map((item, index) => (
// adding the key attribute
<div key={index}>
<img
style={{ borderRadius: "50px" }}
width={"100%"}
src={item.Img}
onClick={() => {
handleClickSlide(item.ImgName);
}}
/>
</div>
))}
</Slider>;