Сделайте правильный onClickThumbnail для лайтбокса.

Question

Итак, я настраиваю компонент Lightbox с библиотекой реагирующих изображений и, кажется, все работает.За исключением одного.

У меня есть рендеринг миниатюр, но я не могу создать правильную функцию onClick.Это потому, что я не знаю, как получить индекс миниатюры, на которую я нажимаю.Если бы у меня был индекс миниатюры, это не было бы проблемой.

Вот моя текущая конфигурация компонента Lightbox:

<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

Хорошо, я понял. Документы о реагирующих изображениях не сообщают, что вашей пользовательской функции onClickThumbnail () будет передан индекс по умолчанию.

Итак, вам нужно создать функцию, которая обрабатывает индекс:

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

Затем вы просто добавляете его в onClickThumbnail:

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

Тогда это работает.