ReactJS中的图像模式与使用JavaScript的幻灯片

我正在尝试在React应用程序中使用此图像灯箱：

这是您尝试过的代码沙盒链接

图像模式对我来说很好。但是，当我尝试实现滑块时，它似乎不起作用。我希望为每个列表实现滑块。我正在从后端获取图像数据

以下是我获取所有图像数据的方式：

{
    "results": [{
        "data": [{
            "id": "f06f2cdf-1bb8-4388-a655-4e916a2703ce",
            "visitRequirementList": [{
                "imageName": "dining pic 1",
                "imagePath": "visitImageDirectory/0297b1ef-644b-45fc-9760-4e5693f54ac0.png",
            }, {
                "imageName": "dining pic 2",
                "imagePath": "visitImageDirectory/1b4915c1-733a-4bdb-a8d7-59ce3a095d44.png",
            }]
        }, {
            "id": "ce059d7a-d3d4-462c-a90f-62be13f24a29",
            "visitRequirementList": [{
                "imageName": "bedroom pic 1",
                "imagePath": "visitImageDirectory/64960b86-f9bf-4de9-816f-f27487245c53.png",
            }]
        }]
    }],
    "message": "data Found",
    "status": "success"
}

这是我的

渲染

方法，用于显示图像：

import React, { Component } from 'react';

export default class extends Component {
    state = {
        showModal: false,
        caption: '',
        modalSrc: '',
        ioImageListing: [],

        // ...rest of the state
    };
    componentDidMount() {
        this.getAllProjectRequirementImageList();
    }
    getAllProjectRequirementImageList = () => {
        axios.get(this.state.apiUrl+'/api/v1/visitRequirement/getAllByProjectId', {
            params: {   projectId: this.state.projectId }
        }).then((response) => {
            console.log("get with list ImageData",response.data.data);
            this.setState({ ioImageListing: response.data.data  });
        }).catch((error)=>{  console.log("error",error); this.setState({ ioImageListing: []  });   });
    }



    render() {
        return (
            <div>
                <div style={{}}>
                    {this.state.ioImageListing.map((io, key) =>
                        <Grid container spacing={24}>
                            {io.visitRequirementList.map((pic, key) => [
                                <Grid style={{position: 'relative'}} item xs={3} key={key}>
                                <span key={key}>
                                    <img
                                        src={this.state.apiUrl + '/api/v1/visitImageRequirementInfo/getImageByImagePathId?imagePath=' + pic.imagePath}
                                        onClick={() => {
                                            this.setState({
                                                showModal: true,
                                                caption: `${pic.imageName}`,
                                                slideIndex: `${io.visitRequirementList.length}`,
                                                modalSrc: `${this.state.apiUrl}/api/v1/visitImageRequirementInfo/getImageByImagePathId?imagePath=${pic.imagePath}`,
                                                count: `${key}`
                                            });
                                        }}
                                    />
                                </span>
                                </Grid>
                            ])}
                        </Grid>
                    )}
                </div>
                <div id="myModal" className="modal" style={{display: this.state.showModal ? 'block' : 'none'}}>
                    <div>
                        <span className="close" onClick={() => this.setState({showModal: false})}>&times;</span>
                        <div className="mySlides"><img className="modal-content" id="img01" src={this.state.modalSrc}/>
                        </div>
                        <a className="prev" onClick={() => {
                            this.plusSlides(-1)
                        }}>&#10094;</a>
                        <a className="next" onClick={() => {
                            this.plusSlides(1)
                        }}>&#10095;</a>
                    </div>
                </div>
            </div>
        );
    }
}

import React，{Component}来自'React'；
导出默认类扩展组件{
状态={
showModal：错，
标题：''，
modalSrc:“”，
ioImageListing:[]，
//…其他州
};
componentDidMount（）{
此.getAllProjectRequirementImageList（）文件；
}
getAllProjectRequirementImageList=（）=>{
get（this.state.apirl+'/api/v1/visitRequirement/getAllByProjectId'{
参数：{projectId:this.state.projectId}
})。然后（（响应）=>{
log（“使用列表ImageData获取”，response.data.data）；
this.setState（{ioImageListing:response.data.data}）；
}).catch（（error）=>{console.log（“error”，error）；this.setState（{ioImageListing:[]}）；}）；
}
render（）{
返回(
{this.state.ioImageListing.map（（io，键）=>
{io.VisiteRequestList.map（（图片，键）=>[
{
这是我的国家({
是的，
标题：`${pic.imageName}`，
幻灯片索引：“${io.VisiteRequestList.length}”，
modalSrc:`${this.state.apiUrl}/api/v1/visitImageRequirementInfo/getImageByImagePathId？imagePath=${pic.imagePath}`，
计数：`${key}`
});
}}
/>
])}
)}
this.setState（{showmodel:false}}>&次；
{
这个。加滑块（-1）
}}>❮
{
这个。加滑块（1）
}}>❯
);
}
}

这是我为显示滑块而编写的函数：

    plusSlides = (n) => {
        var slideIndex=parseFloat(this.state.count);
        slideIndex=slideIndex+n
        this.setState({ count: slideIndex  });

        this.showSlides(slideIndex, n);
    }

  showSlides(slideIndex,n) {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        if (n > slides.length) {slideIndex = 1}
        if (n < 1) {slideIndex = slides.length}
        for (i = 1; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        slides[slideIndex-1].style.display = "block";
    }

plusSlides=（n）=>{
var slideIndex=parseFloat（this.state.count）；
slideIndex=slideIndex+n
this.setState（{count:slideIndex}）；
这是一张幻灯片（幻灯片索引，n）；
}
放映幻灯片（幻灯片索引，n）{
var i；
var slides=document.getElementsByClassName（“mySlides”）；
如果（n>slides.length）{slideIndex=1}
如果（n<1）{slideIndex=slides.length}
对于（i=1；i

---

当图像模式打开时，我尝试将其转换为幻灯片，单击“下一步”和“上一步”按钮。我做错了什么？

您需要将图像保存在一个数组中：将这些图像保存到状态，然后将“mySlides”中的img更改为如下所示：

/** -- snip -- **/
// Inside of "mySlides" div
<img 
    className="modal-content" 
    id="img01" 
    src={this.state.images[this.state.count]}
/>

/**--snip--**/
//“mySlides”分区的内部

首先，您没有以正确的方式使用React。函数

showsiles

直接使用DOM操作。始终避免直接操作DOM，而是将

状态更新为所需的值，并让React为您处理DOM

话虽如此，让我解释一下，通过更新
状态，滑块将如何以反应式方式工作。到目前为止，你已经设法使模式工作。滑块逻辑如下（）：

imageListData是列表的列表。为清楚起见，我将外部列表称为
部分

1-单击任何图像时，使用以下数据更新状态：

showModal // to toggle the visibility of modal
caption // caption for current image
modalSrc // current image source
sectionIndex // current index of outer list
imageIndex // index of current image
currentSectionLength // outer list, i.e. section length

2-单击
Next
或
Previous
按钮，我们将只更新步骤1中提到的状态，滑块将工作。唯一需要考虑的是用正确的值更新状态的逻辑。我会尝试通过评论来解释。所有逻辑都在
plusSlides
功能中

plusSlides = n => {
    const { ioImageListing, imageIndex, sectionIndex, currentSectionLength } = this.state; // extract all the current values from the state

    const nextIndex = imageIndex + n; // add or subtract 1 to get nextIndex. This is temporary. We will use this to determine next image on the slider.
    const numberOfSections = ioImageListing.length; // count of number of outer list.

    if (nextIndex < 0 && sectionIndex === 0) {
      // this means we are at the 1st image of 1st section. Hence no more left navigation, and the function returns. No more execution.
      alert("NO MORE LEFT IMAGE");
      return;
    }

    if (sectionIndex === numberOfSections - 1 && nextIndex > ioImageListing[numberOfSections - 1].visitRequirementList.length - 1) {
      // this condition says we are at the last image of last section. Hence no more right navigation, and the function returns. No more execution.
      alert("NO MORE RIGHT IMAGE");
      return;
    }

    let nextImage, nextImageIndex, nextSectionIndex, nextSectionLength; // these variables will hold the value for next image to be shown determined by the following logic

    if (nextIndex >= 0 && nextIndex < currentSectionLength) {
      // if the nextIndex is >=0 and less than the length of currentSectionLength, it means our next/previous image is in the same section. So we only need to update nextImage data whereas section data remains same
      nextImage = ioImageListing[sectionIndex].visitRequirementList[nextIndex];
      nextImageIndex = nextIndex;
      nextSectionIndex = sectionIndex;
      nextSectionLength = currentSectionLength;
    } else if (nextIndex < 0) {
      // if the nextIndex is less than 0, it means our previous image is in the previous section and it has to be the last image of previous section. So we update both nextImage data and section data accordingly.
      nextImage = ioImageListing[sectionIndex - 1].visitRequirementList[ioImageListing[sectionIndex - 1].visitRequirementList.length - 1];
      nextImageIndex = ioImageListing[sectionIndex - 1].visitRequirementList.length - 1;
      nextSectionIndex = sectionIndex - 1;
      nextSectionLength = ioImageListing[sectionIndex - 1].visitRequirementList.length
    } else {
      // atlast if the nextIndex >= currentSectionLength, it means our next image is in the next section and it has to be the first image of next section. So we update both nextImage data and section data accordingly.
      nextImage = ioImageListing[sectionIndex + 1].visitRequirementList[0];
      nextImageIndex = 0;
      nextSectionIndex = sectionIndex + 1;
      nextSectionLength = ioImageListing[sectionIndex + 1].visitRequirementList.length;
    }

    // finally we update the state with current next values, and the slider works as expected.
    this.setState({
      caption: nextImage.imageName,
      modalSrc: nextImage.imagePath,
      imageIndex:nextImageIndex,
      sectionIndex: nextSectionIndex,
      currentSectionLength:nextSectionLength
    });
  }

plusSlides=n=>{
const{ioImageListing，imageIndex，sectionIndex，currentSectionLength}=this.state；//从状态中提取所有当前值
const nextIndex=imageIndex+n；//添加或减去1以获得nextIndex。这是临时的。我们将使用它来确定滑块上的下一个图像。
const numberOfSections=ioImageListing.length；//外部列表的数量计数。
if（nextIndex<0&§ionIndex==0）{
//这意味着我们在第一部分的第一个图像处。因此不再进行左导航，函数返回。不再执行。
警报（“不再有左侧图像”）；
返回；
}
如果（sectionIndex==numberOfSections-1&&nextIndex>ioImageListing[numberOfSections-1]。VisiteRequestList.length-1）{
//这个条件表示我们在最后一个部分的最后一个图像上。因此不再有右导航，函数返回。不再执行。
警报（“不再有右图”）；
返回；
}
让nextImage、nextImageIndex、nextSectionIndex、nextSectionLength；//这些变量将保存下一个要显示的图像的值