javascript - 打开模态时如何更新图像src(How to update image src when opening modal)

Question

I have this class component and I'm getting the data from a JSON file by using GraphQL.(我有这个类组件，我正在通过使用GraphQL从JSON文件中获取数据。)

Everything works as expected but I find hard to update the image src inside of the Modal component when it's open.(一切都按预期工作，但是我发现很难在Modal组件打开时更新image src 。) Data doesn't seems to get passed to the Modal and it shows the same image for all the cards.(数据似乎没有传递到Modal，并且所有卡都显示相同的图像。) If I try using props it returns undefined in the image.src .(如果我尝试使用道具，它将在image.src返回undefined。)

Any ideas or help on how to solve this would be great!!(关于如何解决此问题的任何想法或帮助都将很棒！！)

my code:(我的代码：)

import React from "react"
import { StaticQuery, graphql } from 'gatsby'
import { Container, Row, Col } from 'react-grid-system'
import Modal from 'react-responsive-modal'



class ProjectsList extends React.Component {
  constructor(props) {
    super(props)
    this.state = { 
      open: false,
    }
  }

  onOpenModal = () => {
    this.setState({ open: true, modalImage: this.props  });
  };

  onCloseModal = () => {
    this.setState({ open: false });
  };

  render() {

    const projects = this.props;
    const { open } = this.state;

    return(
      <div>
        <Row>
          {projects.projects.map(item =>(

            <Col md={6} key={item.id}>
            <div className="project-card">
              <div className="project-img-wrap">
              <img src={item.image.src.publicURL} alt="projects" onClick={this.onOpenModal} />
              </div>
              <div className="project-text-wrap">
              <span className="project-title">{item.title}</span>
              </div>
            </div>
            <Modal open={open} onClose={this.onCloseModal} center>
              <img style={{maxWidth: '800px'}} src={item.image.src.publicURL} alt="projects" />
            </Modal>
            </Col>
          ))}
        </Row>
      </div>
    );
  }
}


export default props => (
  <StaticQuery
    query={graphql`
      query {
        dataJson {
          projects {
            id
            title
            image {
              src {
                publicURL
              }
            }
          }
        }
      }
    `}
    render={({ dataJson }) => <ProjectsList projects={dataJson.projects} {...props} />}
  />
)

  ask by ASG translate from so

Answer 1

I've made little edits to your code.(我对您的代码做了很少的编辑。)

That should work out.(那应该解决。) The problem is that you haven't passed modalImage from your state to src in Modal image.(问题是您还没有将模态图像中的modalImage从您的state传递给src 。)

import React from "react"
import { StaticQuery, graphql } from 'gatsby'
import { Container, Row, Col } from 'react-grid-system'
import Modal from 'react-responsive-modal'

class ProjectsList extends React.Component {
  constructor(props) {
    super(props)
    this.state = { 
      open: false,
      modalImage: ""
    }
  }

  onOpenModal = (image) => {
    this.setState({ open: true, modalImage: image  });
  };

  onCloseModal = () => {
    this.setState({ open: false });
  };

  render() {

    const projects = this.props;
    const { open, modalImage } = this.state;

    return(
      <div>
        <Row>
          {projects.projects.map(item =>(

            <Col md={6} key={item.id}>
            <div className="project-card">
              <div className="project-img-wrap">
              <img src={item.image.src.publicURL} alt="projects" onClick={() => this.onOpenModal(item.image.src.publicURL)} />
              </div>
              <div className="project-text-wrap">
              <span className="project-title">{item.title}</span>
              </div>
            </div>
            <Modal open={open} onClose={() => this.onCloseModal()} center>
              <img style={{maxWidth: '800px'}} src={modalImage} alt="projects" />
            </Modal>
            </Col>
          ))}
        </Row>
      </div>
    );
  }
}


export default props => (
  <StaticQuery
    query={graphql`
      query {
        dataJson {
          projects {
            id
            title
            image {
              src {
                publicURL
              }
            }
          }
        }
      }
    `}
    render={({ dataJson }) => <ProjectsList projects={dataJson.projects} {...props} />}
  />
)