javascript - 如何在打开模态时更新图像src

Question

我有这个类组件，我正在使用 GraphQL 从 JSON 文件获取数据。一切都按预期工作，但我发现在 Modal 组件打开时很难更新其内部的图像 src 。数据似乎没有传递到模态，并且它为所有卡片显示相同的图像。如果我尝试使用 props，它会在 image.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,
    }
  }

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

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