javascript - 如何从模态窗口的 JSONPlaceholder 获取 ReactJS 应用程序中的照片 ID 以查看照片的详细信息？

问题描述

我对 ReactJS Photobrowser 应用程序有一个问题，我无法获取模态窗口的照片 ID 以从照片的缩略图列表中查看单击的照片。

这是下面的 PhotoLoader.js React 组件源代码。

import React, { Component } from 'react';
import Modal from './Modal.js';
import Axios from 'axios';
import './PhotoLoader.css';
import Image from 'react-bootstrap/Image';
import Container from 'react-bootstrap/Container';
import Button from 'react-bootstrap/Button';

class PhotoLoader extends Component {

    constructor(props) {
        super(props);
        this.state = {
            photosPaginated: [], // will hold the results from our ajax call
            show: false
        }
        this.showModal = this.showModal.bind(this);
        this.hideModal = this.hideModal.bind(this);
        this.loadPhotosPaginated();
    }   

    loadPhotosPaginated = () => {
       Axios.get('https://jsonplaceholder.typicode.com/photos?_start=0&_limit=40')
            .then(response => {
            const photosPaginated = response.data;
            this.setState({ photosPaginated });
       });
    };

    showModal = () => {
        this.setState({ show: true });
    };

    hideModal = () => {
        this.setState({ show: false });
    };

    render() {
  
        return (
            <Container className="PhotoLoader-photobrowser-grid-container">
                <Modal show={this.state.show} handleClose={this.hideModal}></Modal>
                { this.state.photosPaginated.map(photo => <Button key={photo.id+"_button"} className="PhotoLoader-photo-button" onClick={this.showModal}><Image key={photo.id+"_photo"} src={photo.thumbnailUrl} className="PhotoLoader-thumbnail" thumbnail></Image></Button>)}
           </Container>
       );
  
    };

}

export default PhotoLoader;

这是下面的 Modal.js 源代码文件。

import React from 'react';
import './modal.css';
import Button from 'react-bootstrap/Button';
import Axios from 'axios';
import Image from 'react-bootstrap/Image';

var title;
var url;

const loadPhoto = (id) => {

    Axios.get('https://jsonplaceholder.typicode.com/photos/'+id)
      .then(response => {
        title = response.data.title;
        url = response.data.url;
    });
    
    return (
      <div>
        <p>{title}</p>
        <Image src={url} className="PhotoLoader-large" fluid />
      </div>
    );
};

const Modal = ({ handleClose, show, children }) => {

const showHideClassName = show ? "modal display-block" : "modal display-none";

    return (
        <div className={showHideClassName}>
            <section className="modal-main">
                {children}
                {loadPhoto(1)} //on this function I need to get correct ID from clicked photo on PhotoLoader.js React Component and not just number 1
                <div className="clear"></div>
                    <Button onClick={handleClose}>
                        Close
                    </Button>
           </section>
       </div>
    );
};

export default Modal;

好的，我的问题是什么？

在 Modal.js 上有一行 {loadPhoto(1)} ，其中数字 1 只是所需照片的 ID，必须以某种方式从 PhotoLoader.js 文件中动态获取。这个怎么做？

标签： javascriptreactjs

javascript - 如何从模态窗口的 JSONPlaceholder 获取 ReactJS 应用程序中的照片 ID 以查看照片的详细信息？

问题描述

解决方案

推荐阅读