Question

我在画廊里工作。单击时，将弹出模式打开，在其中，我希望可以使用“左”和“右”按钮在图像之间切换。有一个画廊，它使用map方法渲染imageg数组：

<div className="inner-section">
   <Fade bottom>
      {
      photos.map(item => 
      <GalleryPhoto 
         key = {item.id}
         imgSrc = {item.photo}
         photoId = {item.id}
         />
      )}
   </Fade>
   <ModalImage />
</div>

这是带有图像的数据文件的外观：

const photos = [{
        photo: "./images/img_title.jpg",
        id: 1,
        caption: "",
    },
    {
        photo: "./images/img_title2.jpg",
        id: 2,
        caption: "",
    }
];

这是主要的图像组件。我传递了带有图像源和图像ID数据的函数或打开模式窗口。该函数只需将modalOpen：false的状态设置为true，并将有关图像src的数据插入到imageSRC状态。

export default class GalleryPhoto extends Component {
  render() {
    const { imgSrc, photoId } = this.props;
    return (
      <ProductConsumer>
        {value => {
          const { handleModal } = value;
          return (
            <div className="gallery-image">
              <img
                onClick={() => handleModal(photoId, imgSrc)}
                src={imgSrc}
                alt=""
              />
            </div>
          );
        }}
      </ProductConsumer>
    );
  }
}

此功能是广告

handleModal = (id, photo) => {
  this.setState(
    {
      modalOpen: !this.state.modalOpen,
      imageSRC: photo
    },
    console.log(id, this.state.imageSRC)
  );
};

点击照片即可打开模式窗口。这是它的组成部分：

<div className={"modal-container " + (modalOpen ? "visible" : "")}>
  <button className="btn move-btn">Left</button>
  <div className="modal-image-container">
    <img src={imageSRC} alt="" />
  </div>
  <button className="btn modal-close-btn" onClick={handleModal}>
    Close
  </button>
  <button className="btn move-btn">Right</button>
</div>;

现在，我希望向左和向右按钮在图片之间切换。有人知道怎么做吗？

如何在点击图像之间切换？

0 个答案: