Получить индекс изображения по нажатию ReactJS - PullRequest
Новая
       23

Получить индекс изображения по нажатию ReactJS

0 голосов
/ 28 октября 2019

В моем веб-приложении есть Галерея, которую я импортировал с помощью 'React-Photo-Gallery.'

Я могу заполнить галерею изображениями и открыть фотографиюкарусель по клику. Как я могу получить индекс изображения, по которому щелкнули, используя метод 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.

Буду продолжать обновлять мой вопрос по мере того, как я буду проводить дополнительные исследования, хотя любые отзывы приветствуются.

1 Ответ

1 голос
/ 28 октября 2019

Для компонента Gallery Функция onClick:

Необязательно. Сделайте что-нибудь, когда пользователь нажмет на фотографию. Получает аргументы event и объект, содержащий индекс, первоначально отправленные фотографии obj и следующие и предыдущие фотографии в галерее, если они существуют

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
...