使用 javascript 的 reactjs 图像模态

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 的模态调用数据中显示图像列表。我的 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 操作方法。 相反，您应该使用React Ref 。 请注意，您根本不应该使用 refs，除非它是唯一的选择。

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

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

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

Answer 2

在使用 React 开发应用程序时，您应该再次阅读规则和约定。 首先，避免像修改 Modal 元素那样直接使用 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 状态而不是直接操作来实现逻辑。 希望这可以帮助