Блог

Я читал много подобных вопросов, но они не сработали. я хочу открыть объект, который щелкнул в галерее, в модальном режиме. Моя проблема заключается в том, что когда пользователь нажимает на картинку, чтобы открыть модальный последний объект в массиве. Я не знаю, как сделать так, чтобы открывался только тот модальный параметр, который выбран для открытия.

 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>
    )
  }
} 
  

Я думаю, что проблема связана с контроллером. У вас есть только 1 контроллер для отображения или скрытия модального. У вас может быть только 1 модальное значение для вашей функции рендеринга, например

 <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(para)}>
                    <div class="image">
                      <img src={para.image} />
                    </div>
                  </div>
                </div>
                  
              )
            })}
          <Modal 
                      isOpen={this.state.showModal}
                      contentLabel="Minimal Modal Example"
                    >
                      <button onClick={this.handleCloseModal}>Close Modal</button>
                      {this.state.selectedImage ? <img src={selectedImage.image}/> : null}
                    </Modal>
        </div>
      </div>
  </div>
  

и ваш открытый модальный обработчик может быть следующим

 handleOpenModal (selectedImage) {
   this.setState({ showModal: true, selectedImage });
}
  

дайте мне знать, работает это или нет.