我正在尝试在React应用中使用此图片灯箱:
图像模式对我来说很好。但是,当我尝试实现滑块时,它似乎不起作用。我正在从后端获取图像数据。
这是我获取所有图像数据的方式:
{
"results": [{
"data": [{
"id": "f06f2cdf-1bb8-4388-a655-4e916a2703ce",
"visitLocation": "dining room",
"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",
"visitLocation": "bedroom",
"visitRequirementList": [{
"imageName": "bedroom pic 1",
"imagePath": "visitImageDirectory/64960b86-f9bf-4de9-816f-f27487245c53.png",
}]
}]
}],
"message": "data Found",
"status": "success"
}
这是我的render
显示图像的方法:
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})}>×</span>
<div className="mySlides"><img className="modal-content" id="img01" src={this.state.modalSrc}/>
</div>
<a className="prev" onClick={() => {
this.plusSlides(-1)
}}>❮</a>
<a className="next" onClick={() => {
this.plusSlides(1)
}}>❯</a>
</div>
</div>
</div>
);
}
}
这是我编写的用于显示滑块的功能:
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";
}
当图像模式打开时,我想将其变成幻灯片,只需单击我的下一个和上一个按钮即可。对此的任何帮助将不胜感激。
将“ mySlides”内部的img更改为:
// Create this in render method
const imageUrl = `${this.state.apiUrl}/api/v1/visitImageRequirementInfo/getImageByImagePathId?imagePath=`
/** -- snip -- **/
<img
className="modal-content"
id="img01"
src={`${imageUrl}${this.state.count}`}
/>