单击ReactJS检索图像的索引

Question

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

我能够用图像填充图库，并在单击时打开一个照片轮播。如何使用onClick方法检索单击的图像的索引？ activeIndex默认情况下设置为0，因此在单击任何图像时，将显示数组中的第一张图像。我希望单击的图像显示在轮播/灯箱中。

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的新手。 

尽管我很感谢任何投入，但我会继续进行研究，以继续更新我的问题。

我的Web应用程序中有一个图库，该图库是使用“反应照片画廊”导入的。我可以用图像填充图库，并在单击时打开一个照片轮播。如何检索索引...

Answer 1

对于组件Gallery onClick函数：