javascript - How can I add Vanilla JS to my react app to create Image Modal pop-ups?

Question

I am creating an image grid for a website Im making using React and I wanted to add a modal functionality to view each image as a modal pop-up. For this I need to use some Vanilla JS in combination with CSS and HTML. This is the js I want to use:

// Select the modal
var modal = document.getElementById('myModal');

// Get the image inside the modal
var img = document.getElementsByClassName('image');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

// Select the close button
var span = document.getElementsByClassName("close");

// Close Button 
span.onclick = function() { 
  modal.style.display = "none";
}

How can I integrate it with the rest of the app?

EDIT: This is the component I am working on:

import React from "react";
import "../stylesheets/Photos.scss";


const Photos = () => {
  return (
  <div className="photos_container">
      <h1 className="photos_title">PHOTO GALLERY</h1>
      <div className="row"> 
        <div className="column">
          <img className='image'src="../assets/photos_page/photo2.jpg"/>
          <img className='image' src="../assets/photos_page/photo3.jpg"/>
          
        </div>
        <div className="column">
          <img className='image' src="../assets/photos_page/photo4.jpg"/>
          <img className='image' src="../assets/photos_page/photo5.jpg"/>
          <img className='image' src="../assets/photos_page/photo6.jpg"/>
        </div> 
        <div className="column">
          <img className='image' src="../assets/photos_page/photo7.jpg"/>
          <img className='image' src="../assets/photos_page/photo8.png"/>
          <img className='image' src="../assets/photos_page/photo9.jpg"/>
        </div>
        <div className="column">
          <img className='image' src="../assets/photos_page/photo10.png"/>
          <img className='image' src="../assets/photos_page/photo11.jpg"/>
        </div>
      </div>
      {/* modal */}
      <div id='mymodal' className='modal'>
        <span className='close'>&times;</span>

        <img className='modal-content' id="img01"/>

        <div id='caption'></div>
      </div>
  </div>
  );
};

export default Photos;

标签： javascriptreactjs

Answer 1

有人打败了我，但我仍然会在这里留下我的答案版本，以防你觉得它有帮助。我不会以上述方式选择文档元素，因为有更简单和更具声明性的方式。您要做的是将此组件更改为有状态的组件，其中包含像“showmodal”这样的状态属性。如果为真，则应显示模态。然后，您可以在 onClick 函数中使用 this.setState({ showmodal: true, slectedImage: yourImage }) 切换状态并设置被点击的图像。一个简单的绝对定位容器应该可以解决模态容器的问题。

以下是此类组件的外观示例。

  const images = [
  {
    uri:
      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTm3CuNzOrmWhos3MXI0v_KkyO_xrZ5Y8hFxSYGj_6OtUygZUUX"

  },
  {
    uri:
      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQR_Fg_lMrPjMa1duHXnvFnZOtsn883LGLD7c2-CwKdfFXAoveQnQ"
  }
];

class App extends React.Component {

  state = {
    showmodal: false,
    selectedImage: undefined
  };

  render() {
    // 
    return (
      <div style={{ height: "100vh"}}>
        {images.map(i => (
          <img
            key={i.uri}
            src={i.uri}
            style={{ margin: 5 }}
            onClick={() => this.setState({ showmodal: true, selectedImage: i })}
          />
        ))}
      {this.state.showmodal &&   
        <div
          onClick={() => this.setState({ showmodal: false })}
          style={{
            display: 'flex',
            position: "absolute",
            top: 0,
            bottom: 0,
            left: 0,
            right: 0,
            backgroundColor: "rgba(0,0,0,0.5)",
            justifyContent: 'center', alignItems: 'center'
          }}
        >
          <div style={{ height: 300, width: 500, backgroundColor: '#fff' }}>
            <img src={this.state.selectedImage.uri} style={{ flex: 1}} />
            <h3>Place any content here</h3>
          </div>
        </div>}
      </div>
    );
  }
}

React.render(<App />, document.getElementById("app"));

我没有重构样式，因此您可以将每个 div 的功能作为一个超级基本示例来查看，您可以在 codepen 中查看。另外，我同意上面的观点，即尝试重构列，以便您可以以完全相同的方式呈现它们，并减少重复。

希望能帮助到你！