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)}

然后它起作用。

为灯箱做出适当的onClickThumbnail反应图像

1 个答案: