打开模态时如何更新图像src答案

【问题标题】：How to update image src when opening modal打开模态时如何更新图像src
【发布时间】：2019-12-01 05:32:59
【问题描述】：

我有这个类组件，我正在使用 GraphQL 从 JSON 文件中获取数据。一切都按预期工作，但我发现在Modal 组件打开时很难更新图像src。数据似乎没有传递给模态，它为所有卡片显示相同的图像。如果我尝试使用道具，它会在 image.src 中返回 undefined。

任何关于如何解决这个问题的想法或帮助都会很棒！

我的代码：

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

【问题讨论】：

标签： javascript reactjs graphql gatsby

【解决方案1】：

我对您的代码做了少许修改。那应该行得通。问题是您还没有在模态图像中将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} />}
  />
)

【讨论】：