image modal with reactjs using javascript

Question

我正在尝试在单击图像时打开图像模式。我正在从 restapi 获得图像列表。但是我的页面在呈现时什么也没显示。我使用此链接作为参考：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal_img

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: []  });   });
};


componentDidMount() {
console.log('componentDidMount colling ...');
this.getAllProjectRequirementImageList();
// responsive
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById('img01');
var captionText = document.getElementById('caption');
if (img) {
img.onclick = () => {
modal.style.display = 'block';
modalImg.src = this.src;
captionText.innerHTML = this.alt;
};
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName('close')[0];
span.onclick = () => {
modal.style.display = 'none';
};
}
render() {
return (
<div>
<div>
{this.state.ioImageListing.map((io, key) => {
io.visitRequirementList.map((skill, j) => (
<img
id="myImg"
src={
this.state.apiUrl +
'/api/v1/visitImageRequirementInfo/getImageByImagePathId?imagePath=' +
skill.imagePath
}
alt="Snow"
style={width:"100%";maxWidth:"300px"}
/>
));
})}
</div>
<div id="myModal" className="modal">
<div>
<span className="close">&times;</span>
<img className="modal-content" id="img01" />
<div id="caption"></div>
</div>
</div>
</div>
);
}
}

这是我从后端得到的 JSON 响应：

{
"data": [
{
"id": "8c83ac41-13b2-4827-96bc-dd251c4cf929",
"visitLocation": "bedroom",
"visitRequirementList": [
{
"imagePath": "visitImageDirectory/332c3b83-82d3-45b6-9660-309ebc3f246d.png",
},
{
"imagePath": "visitImageDirectory/332c3b83-82d3-45b6-9660-309ebc3f246d.png",
}
]
},
{
"id": "05c36c21-adc6-4fa3-9609-b3dea67b9e69",
"visitLocation": "kitchen",
"visitRequirementList": [
{
"imagePath": "visitImageDirectory/7678f04c-22bd-4735-9f7d-8c34db31b714.png"
},
]
}
],
"message": "data Found",
"status": "success"
}

如何在来自 restapi 的模式调用数据中显示图像列表。我的餐厅工作正常。任何有关这方面的帮助将不胜感激。

Answer 1

在这个例子中，你做了很多事情都是非反应方式。首先，这是我对您的问题的解决方案：

import React, { Component } from 'react';
export default class extends Component {
state = {
showModal: false,
caption: '',
modalSrc: '',
// ...rest of your state
};
componentDidMount() {
this.getAllProjectRequirementImageList();
}
render() {
return (
<div>
<div>
{this.state.ioImageListing.map((io, key) => {
io.visitRequirementList.map((skill, j) => {
const src = `${this.state.apiUrl}/api/v1/visitImageRequirementInfo/getImageByImagePathId?imagePath=${skill.imagePath}`;
const alt = 'Snow'; // or whatever
return (
<img
id="myImg"
src={src}
onClick={() => {
this.setState({ showModal: true, caption: alt, modalSrc: src });
}}
alt={alt}
style={{ width: '100%', maxWidth: '300px' }}
/>
);
});
})}
</div>
<div
id="myModal"
className="modal"
style={{ display: this.state.showModal ? 'block' : 'none' }}
>
<div>
<span className="close" onClick={() => this.setState({ showModal: false })}>
&times;
</span>
<img className="modal-content" id="img01" src={this.state.modalSrc} />
<div id="caption">
{this.state.caption}
</div>
</div>
</div>
</div>
);
}
}

对我来说，主要删除是：

1. 在 React 中，如果你想访问 DOM，你永远不应该使用getElementById、querySelector或任何其他普通的 JavaScript DOM 操作方法。请注意，除非这是唯一的选择，否则您根本不应该使用 refs。

2. 如果你想在点击时改变样式，尤其是像隐藏和显示模态这样的东西，最简单的方法是使用状态并定义一个依赖于该状态的样式，就像我在模态中所做的那样。

3. React 有自己的事件。Javascript 的常规onclick对 ReactonClick的更改。您可以在此处阅读有关它的更多信息。

希望这段代码对你有用。让我知道它是怎么回事，或者您是否需要其他任何东西。

Answer 2

在使用 React 开发应用程序时，您应该再次阅读有关规则和约定的信息。 首先，避免像修改模态元素那样直接使用 DOM 操作。请以 React 的方式进行。尝试这样的事情：

<div id="myModal" className="modal" style={this.state.isShowModal ? "block" : "none"}>
<div>
<span className="close">&times;</span>
<img className="modal-content" id="img01" src={this.state.displayImgSrc}/>
<div id="caption">{this.state.displayImgCaption}</div>
</div>
</div>

然后将myImg单击事件处理程序移到componenDidMount之外。使其成为一个单独的函数，并在从图像列表渲染时使用它直接绑定。

io.visitRequirementList.map((skill, j) => (
<img
id="myImg"
src={
this.state.apiUrl +
'/api/v1/visitImageRequirementInfo/getImageByImagePathId?imagePath=' +
skill.imagePath
}
onClick={this.imageClick}
alt="Snow"
style={width:"100%";maxWidth:"300px"}
/>
));

当然，在imageClick内部，你应该通过改变 React 状态而不是直接操作来实现逻辑。 希望这能有所帮助