单击 ReactJS 检索图像索引

Question

我的 Web 应用程序中有一个图库，是我使用 'React-Photo-Gallery.'

导入的

我可以用图片填充画廊，并在点击时打开照片轮播。如何检索使用 onClick 方法单击的图像的索引？ activeIndex 默认设置为 0，因此在单击任何图像时，将显示数组中的第一张图像。我希望点击的图像显示在 carousel/Lightbox 中。

const mappingFunction = (img, index) => ({index, src: img.url, sizes: ["(min-width: 480px) 20vw,(min-width: 1024px) 25vw,25vw"], width: 4, height: 3});

const photosForGallery = images.map(mappingFunction)

映射图像后，我这样显示：

<Gallery photos={photosForGallery} direction={"column"} columns={4} onClick={() => this.setState({ activeIndex: *use index here*, isOpen: true })} />

{isOpen && (
          <Lightbox
            mainSrc={urls[activeIndex]}
            mainSrcThumbnail={urls[activeIndex]}
            nextSrc={urls[(activeIndex + 1) % urls.length]}
            nextSrcThumbnail={urls[(activeIndex + 1) % urls.length]}
            prevSrc={urls[(activeIndex + urls.length - 1) % urls.length]}
            prevSrcThumbnail={urls[(activeIndex + urls.length - 1) % urls.length]}
            onCloseRequest={() => this.setState({ isOpen: false })}
            onMovePrevRequest={() =>
              this.setState({
                activeIndex: (activeIndex + urls.length - 1) % urls.length
              })
            }
            onMoveNextRequest={() =>
              this.setState({
                activeIndex: (activeIndex + 1) % urls.length
              })
            }
          />
        )}

我遇到困难的地方是访问所选图像的索引。我尝试过使用 'this' 关键字，甚至尝试过实现回调函数。但是（如果我错了请纠正我），点击时所选元素似乎是图库本身，而不是我选择的图像。任何输入将不胜感激，因为我是 React / JS 的新手。

随着我做更多的研究，将继续更新我的问题，但欢迎任何意见。

Answer 1

对于组件 Gallery onClick 函数：

Optional. Do something when the user clicks a photo. Receives arguments event and an object containing the index, Photos obj originally sent and the next and previous photos in the gallery if they exist

http://neptunian.github.io/react-photo-gallery/api.html

因此，您可能需要做的就是获取索引：

<Gallery
  photos={photosForGallery}
  direction={"column"}
  columns={4}
  onClick={(e, { index }) => this.setState({ activeIndex: index, isOpen: true })} />  // <---- HERE

单击 ReactJS 检索图像索引

Retrieve the index of image on click ReactJS

javascript

onclick

this

lightbox

reactjs