在 React Slick Slider 内的每个图像上添加模态弹出窗口

Question

每次在我的 react-slick 滑块上单击图像时，我都想显示模态弹出窗口，但完全不知道该怎么做。我的滑块正在从数组接收图像

我想为每个图像分配唯一的 onClick 函数

示例：onClick={berryModal}、onClick={melonModal}、onClick={grapeModal}

到目前为止我尝试了什么，我不知道如何为每个图像分配唯一的 onClick 函数：

  const [showModal, setShowModal] = useState(false)

  const openModal = () => {
    setShowModal(prev => !prev)
  }

这是我的 react-slick 的滑块设置：

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

这就是我在页面上显示 react-slick 滑块的方式：

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

Answer 1

您在这里可以做的是，在此 Slider 之外但在同一组件中定义一个呈现通用模式。

您可以使用当前滑块索引中的图像 URL 在模式中显示图像。

return(
    <>
      <Modal><img src={currentSliderIndexUrl} /></Modal>
      <Slider> {your images here} </Slider>
    <>
)

在 React Slick Slider 内的每个图像上添加模态弹出窗口

Adding Modal Popup on Each Image Inside React Slick Slider

reactjs

react-slick