Блог

Я хочу показывать модальное всплывающее окно каждый раз, когда изображение нажимается на слайдер моего react-slick, и совершенно не представляю, как это сделать. мой слайдер получает изображение из массива

Я хочу назначить каждому изображению уникальную функцию onClick

пример : onClick={berryModal}, onClick={melonModal}, onClick={grapeModal}

Что я пробовал до сих пор, я не знаю, как назначить уникальную функцию onClick каждому изображению :

 const [showModal, setShowModal] = useState(false)   const openModal = () =gt; {  setShowModal(prev =gt; !prev)  }  

Это настройки слайдера моей реакции-слика :

 infinite: true,  slidesToShow: 4,  centerMode: true,  centerPadding: 0,  dots: true,  autoplay: true,  speed: 1000,  autoplaySpeed: 2500,  cssEase: "linear",  beforeChange: (current, next) =gt; setImageIndex(next),  nextArrow: lt;NextArrow /gt;,  prevArrow: lt;PrevArrow /gt;  

Вот как я показываю слайдер моего react-slick на своей странице :

 return (  lt;Slider {...settings}gt;  {images.map((img, idx) =gt; (  lt;div className={idx === imageIndex ? "slide AutoPlay" : "slide"}gt;  lt;img src={img} alt={img} onClick={"imagename" modal}/gt;  //i wan't to know the proper way to give onclick function name  lt;/divgt;  ))}  lt;/Slidergt;  ); }  

Что вы можете здесь сделать, так это определить рендеринг общей модальности вне этого слайдера, но в том же компоненте.

Вы можете отобразить изображение в модальном режиме, используя URL-адрес изображения из текущего индекса слайдера.

 return(  lt;gt;  lt;Modalgt;lt;img src={currentSliderIndexUrl} /gt;lt;/Modalgt;  lt;Slidergt; {your images here} lt;/Slidergt;  lt;gt; )