Я читал много подобных вопросов, но они не работали. Я хочу открыть объект, который щелкнул в галерее, в модальном режиме. Моя проблема в том, что когда пользователь нажимает на изображение, чтобы открыть модальное окно последнего объекта в массиве. Я не знаю, как сделать так, чтобы открывалось только то модальное окно, которое выбрано.
class SingleGallery extends Component{
constructor () {
super();
this.state = {
showModal: false
};
this.handleOpenModal = this.handleOpenModal.bind(this);
this.handleCloseModal = this.handleCloseModal.bind(this);
}
handleOpenModal () {
this.setState({ showModal: true });
}
handleCloseModal () {
this.setState({ showModal: false });
}
render(){
let singleGalleryObj = [
{image: imageGallery1},
{image: imageGallery2},
{image: imageGallery3},
{image: imageGallery4},
{image: imageGallery1},
{image: imageGallery2}
]
return(
<div class="singleGallery">
<div class="SGContent">
<div class="title">Gallery 1</div>
<div class="images">
{singleGalleryObj.map((para) => {
return (
<div>
<div class="galleryBox" onClick={this.handleOpenModal}>
<div class="image">
<img src={para.image} />
</div>
</div>
<Modal
isOpen={this.state.showModal}
contentLabel="Minimal Modal Example"
>
<button onClick={this.handleCloseModal}>Close Modal</button>
<img src={para.image}/>
</Modal>
</div>
)
})}
</div>
</div>
</div>
)
}
}