Estoy usando react slick en mis sitios web. Tengo 4 diapositivas. Cada diapositiva, quiero una función onClick para obtener el valor. Pero cuando hago clic en la diapositiva, solo obtengo el último valor. Busqué Stack Overflow pero no puedo encontrar soluciones.
Aquí está el código:
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>Por favor ayúdame con algunas soluciones.
ha creado una función diferente handleClickProduts y está usando una función diferente en img onClick
onClick={() => {handleClickProduts (item.ImgName) }}Enlace de CodeBox: código de trabajo