使用库react-photo-gallery时如何在悬停时进行叠加

Question

我在我的照片库中使用react-photo-library。悬停时会出现两个图标覆盖，即删除和全屏。单击全屏图标时，会出现组件灯箱。但是，当我单击图标时，出现一个错误“ TypeError：无法读取未定义的属性'index'”。

在文档中，我没有找到解决方案。而且，我没有看到有人在做同样的事情

This is my code:
import React from 'react';
import Gallery from 'react-photo-gallery';
import Lightbox from 'react-images';

const photos = [
    { src: 'https://source.unsplash.com/2ShvY8Lf6l0/800x599', width: 4, height: 3, className:"box" },
    { src: 'https://source.unsplash.com/Dm-qxdynoEc/800x799', width: 1, height: 1, className:"box" },
    { src: 'https://source.unsplash.com/qDkso9nvCg0/600x799', width: 3, height: 4, className:"box" },
    { src: 'https://source.unsplash.com/iecJiKe_RNg/600x799', width: 3, height: 4, className:"box" },
    { src: 'https://source.unsplash.com/epcsn8Ed8kY/600x799', width: 3, height: 4, className:"box" },
    { src: 'https://source.unsplash.com/NQSWvyVRIJk/800x599', width: 4, height: 3, className:"box" },
    { src: 'https://source.unsplash.com/zh7GEuORbUw/600x799', width: 3, height: 4, className:"box" },
    { src: 'https://source.unsplash.com/PpOHJezOalU/800x599', width: 4, height: 3, className:"box" },
    { src: 'https://source.unsplash.com/I1ASdgphUH4/800x599', width: 4, height: 3, className:"box" }
];

class UsersPhotos extends React.Component {
    constructor() {
        super();
        this.state = { currentImage: 0 };
        this.closeLightbox = this.closeLightbox.bind(this);
        this.openLightbox = this.openLightbox.bind(this);
        this.gotoNext = this.gotoNext.bind(this);
        this.gotoPrevious = this.gotoPrevious.bind(this);
    }
    openLightbox(event, obj) {
        this.setState({
            currentImage: obj.index,
            lightboxIsOpen: true,
        });
    }
    closeLightbox() {
        this.setState({
            currentImage: 0,
            lightboxIsOpen: false,
        });
    }
    gotoPrevious() {
        this.setState({
            currentImage: this.state.currentImage - 1,
        });
    }
    gotoNext() {
        this.setState({
            currentImage: this.state.currentImage + 1,
        });
    }
    render() {
        return (
            <div className="box">
                         <Gallery
                    photos={photos}

                    columns={2} />
                <div className="overlay">
                    <span id="plus" onClick={this.openLightbox}>Full Screen</span>
                    <span> Delete </span>
                </div>

                <Lightbox images={photos}
                    onClose={this.closeLightbox}
                    onClickPrev={this.gotoPrevious}
                    onClickNext={this.gotoNext}
                    currentImage={this.state.currentImage}
                    isOpen={this.state.lightboxIsOpen}
                />



            </div>
        )
    }
}
export {Photos};