javascript - 为 Lightbox react-images 制作一个合适的 onClickThumbnail

Question

所以我正在使用 react-images 库设置一个 Lightbox 组件，并且似乎一切正常。除了一件事。

我有缩略图渲染，但我无法创建正确的 onClick 函数。这是因为我不知道如何获取我点击的缩略图的索引。如果我有缩略图索引，这将不是问题。

这是我当前的灯箱组件配置：

<Lightbox
  images={imageObjects}
  isOpen={openGallery}
  currentImage={middleImageIndex}
  showThumbnails={true}
  onClickThumbnail={this.onImageSelect.bind(this, index)}
  onClickPrev={this.onImageSelect.bind(this, middleImageIndex-1, length)}
  onClickNext={this.onImageSelect.bind(this, middleImageIndex+1, length)}
  onClose={this.onCloseGallery.bind(this)}
/>

如何知道我单击的缩略图的索引，以便将其设置为 currentImage？

谢谢！

Answer 1

好的，我明白了。react-images 文档不会告诉您的自定义 onClickThumbnail() 函数将默认传递索引。

因此，您需要创建一个处理索引的函数：

onImageSelect(newIndex){
  this.props.setMiddleImage(newIndex)
}

然后您只需将其添加到 onClickThumbnail：

onClickThumbnail={this.onImageSelect.bind(this)}

然后它工作。