React-Lightbox图像

Question

我如何拥有它，以便当我点击图像时，它会打开带有我刚刚点击的当前图像的灯箱？现在，如果我点击第二个图片标签，它总是会在灯箱中显示第一张图片而不是我刚刚点击的图片。 这就是我尝试使用的内容：http://jossmac.github.io/react-images/

export default class Home extends Component {

 constructor() {
    super();
    this.state = {
      lightboxIsOpen: false,
      currentImage: 0,
    }
    this.closeLightbox = this.closeLightbox.bind(this);
    this.gotoNext = this.gotoNext.bind(this);
    this.gotoPrevious = this.gotoPrevious.bind(this);

  }
  openLightbox (index, event) {
    event.preventDefault();
    this.setState({
      currentImage: 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,
    });
  }
  gotoImage (index) {
    this.setState({
      currentImage: index,
    });
  }
  handleClickImage () {
    if (this.state.currentImage === this.props.images.length - 1) return;

    this.gotoNext();
  }
  renderGallery () {
    const { images } = this.props;

    if (!images) return;

    const gallery = images.filter(i => i.useForDemo).map((obj, i) => {
      return (
        <a
          href={obj.src}
          className={css(classes.thumbnail, classes[obj.orientation])}
          key={i}
          onClick={(e) => this.openLightbox(i, e)}
        >
          <img src={obj.thumbnail} className={css(classes.source)} />
        </a>
      );
    });
  } 

    render() {
            const {
            photoIndex,
            lightboxIsOpen,
            currentImage,
        } = this.state;



  return(
    <div>


<Grid>
  <Row>
   <Col md={6} md={4} >
      <img src="https://docs.google.com/uc?id=0B0huBtqYaof7WVNjMjNMZTY3UDg" onClick={() => this.setState({ lightboxIsOpen: true })} />
      {lightboxIsOpen &&
        <Lightbox
        images={[{ src: 'https://docs.google.com/uc?id=0B0huBtqYaof7WVNjMjNMZTY3UDg' }, { src: 'https://docs.google.com/uc?id=0B0huBtqYaof7c0dpVFdGbGl0MWs' }]}
        currentImage={this.state.currentImage}
        onClickImage={this.handleClickImage}
        isOpen={this.state.lightboxIsOpen}
        onClickPrev={this.gotoPrevious}
        onClickNext={this.gotoNext}
        onClose={this.closeLightbox}

      />

                }
    </Col>
    <img src="https://docs.google.com/uc?id=0B0huBtqYaof7c0dpVFdGbGl0MWs" onClick={() => this.setState({ lightboxIsOpen: true })} />
  </Row>


</Grid>
</div>


    )
}
}

Answer 1

您应该使用地图功能

const imgs = [
    "//docs.google.com/uc?id=0B0huBtqYaof7WVNjMjNMZTY3UDg", 
    "//docs.google.com/uc?id=0B0huBtqYaof7c0dpVFdGbGl0MWs"
]
const i;
imgs.map((entry, index) => i=index );
//then update your cunstructor
 constructor(props) {
        super(props);

        this.state = {
            photoIndex:i,
            isOpen: false
        };
    }

Answer 2

在这种情况下，您需要使用react-lightbox-component库，而不是react-image-lightbox

安装

npm install react-lightbox-component

示例代码

import Lightbox from 'react-lightbox-component';

const App = () => (
  <div>
    <Lightbox images={
      [
        {
          src: 'some image url',
          title: 'image title',
          description: 'image description'
        }
      ]
    }/>
  </div>
);