单击更改 imageCaption 到下一个 -React-image-lightbox

Question

我正在使用 "react-image-lightbox" 制作画廊。首先，我使用来自 Material-Ui 的 Grid 显示图像，然后遵循来自 https://www.npmjs.com/package/react-image-lightbox 的文档 但是，我无法相应地更改 imagecaption onclick 下一个或上一个。 关于如何解决该部分的任何线索？

import img1 from "../../Image/Process/image1.jpg";
import img2 from "../../Image/Process/image2.jpg";
import img3 from "../../Image/Process/image3.jpg";

const images = [img1, img2, img3];

class GalleryPage extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      photoIndex: 0,
      isOpen: false,
      caption: null
    };
  }

  render() {
    const { photoIndex, isOpen, caption } = this.state;
    return (
      <div className="gallery-section" id="gallery">
        <div className="mdb-lightbox">
          <Grid container direction="row" justify="center" alignItems="center">
            <Grid container item xs={3} spacing={1}>
              <figure className="frame">
                <img
                  src={img1}
                  alt="Working day"
                  className="img-fluid"
                  onClick={() =>
                    this.setState({
                      photoIndex: 0,
                      isOpen: true,
                      caption:
                        "A regular work day, Photo: Nahida Islam, license: CC0"
                    })
                  }
                />
              </figure>
            </Grid>
            <Grid container item xs={3} spacing={1}>
              <figure className="frame">
                <img
                  src={img2}
                  alt="Pizza break"
                  className="img-fluid"
                  onClick={() =>
                    this.setState({
                      photoIndex: 1,
                      isOpen: true,
                      caption:
                        "A pizza break was needed, Photo: Nahida Islam, license: CC0"
                    })
                  }
                />
              </figure>
            </Grid>
            <Grid container item xs={3} spacing={1}>
              <figure className="frame">
                <img
                  src={img3}
                  alt="The satellite"
                  className="img-fluid"
                  onClick={() =>
                    this.setState({
                      photoIndex: 2,
                      isOpen: true,
                      caption:
                        "The special weapon: Satellite, Photo: Nahida Islam, license: CC0"
                    })
                  }
                />
              </figure>
            </Grid>
          </Grid>
        </div>
        {isOpen && (
          <Lightbox
            enableZoom={false}
            mainSrc={images[photoIndex]}
            nextSrc={images[(photoIndex + 1) % images.length]}
            prevSrc={images[(photoIndex + images.length - 1) % images.length]}
            imageTitle={photoIndex + 1 + "/" + images.length}
            imageCaption={caption}
            onCloseRequest={() => this.setState({ isOpen: false })}
            onMovePrevRequest={() =>
              this.setState({
                photoIndex: (photoIndex + images.length - 1) % images.length
              })
            }
            onMoveNextRequest={() =>
              this.setState({
                photoIndex: (photoIndex + 1) % images.length
              })
            }
          />
        )}
      </div>
    );
  }
}

Answer 1

查看 example code on the react-image-lightbox Github。您只需要另一个标题数组，类似于您的图像数组。然后使用您的 photoIndex 值来获得正确的标题。像这样的 - 我只改变了 imageCaption 道具所以我只是删除了其他人来说明：

const captions = [
    "caption one", "caption two", "last caption"
]

{isOpen && (
  <Lightbox
    imageCaption={captions[photoIndex]}
  />
)}