javascript - React image onClick to display in another component? - Stack Overflow

admin管理员组

文章数量:1404585

Is it possible to click on one image in a ponent and have that onClick display the same image and information in another ponent? My mind is drawing a blank, and I've been searching for an answer for quite a while now.

I've created a ponent that displays multiple images. I also created 3 separate ponents that I would like to display an image and some text based on the image clicked in the first ponent. I've thought about routing and creating ponents for each image, but felt that that method is not efficient...

Thank you in advance!

This is the main ponent:

import React from 'react';
import './app.css';
import ImageSection from './image_section';
import PaneOne from './pane_1';
import PaneTwo from './pane_2';
import PaneThree from './pane_3';


const App = () => (
    <div className="main_section">
        <div className="top_pane_area">
            <PaneOne />
            <PaneTwo />
            <PaneThree />
        </div>
        <div className="bottom_image_area">
            <ImageSection />
        </div>
    </div>
);

export default App;

This is what all three ponents where I would like the images to be displayed (at the moment; all three ponents are identical):

import React, { Component } from 'react';
import './app.css';


class PaneOne extends Component {
    render () {
        return (
            <div className="panes">

            </div>
        )
    }
}

export default PaneOne;

And this is the ponent with the images (at the moment):

import React, { Component } from 'react';
import './app.css';
import one from './imgs/one.jpg';
import two from './imgs/two.jpg';
import three from './imgs/three.jpg';
import four from './imgs/four.jpg';
import five from './imgs/five.jpg';
import six from './imgs/six.jpg';


class ImageSection extends Component {
    render() {
        return(
            <div>
                <div>
                    <img className="prof_pic" src={one} />
                    <img className="prof_pic" src={two} />
                    <img className="prof_pic" src={three} />
                    <img className="prof_pic" src={four} />
                    <img className="prof_pic" src={five} />
                    <img className="prof_pic" src={six} />
                </div>
            </div>
        )
    }
}

export default ImageSection;

Is it possible to click on one image in a ponent and have that onClick display the same image and information in another ponent? My mind is drawing a blank, and I've been searching for an answer for quite a while now.

I've created a ponent that displays multiple images. I also created 3 separate ponents that I would like to display an image and some text based on the image clicked in the first ponent. I've thought about routing and creating ponents for each image, but felt that that method is not efficient...

Thank you in advance!

This is the main ponent:

import React from 'react';
import './app.css';
import ImageSection from './image_section';
import PaneOne from './pane_1';
import PaneTwo from './pane_2';
import PaneThree from './pane_3';


const App = () => (
    <div className="main_section">
        <div className="top_pane_area">
            <PaneOne />
            <PaneTwo />
            <PaneThree />
        </div>
        <div className="bottom_image_area">
            <ImageSection />
        </div>
    </div>
);

export default App;

This is what all three ponents where I would like the images to be displayed (at the moment; all three ponents are identical):

import React, { Component } from 'react';
import './app.css';


class PaneOne extends Component {
    render () {
        return (
            <div className="panes">

            </div>
        )
    }
}

export default PaneOne;

And this is the ponent with the images (at the moment):

import React, { Component } from 'react';
import './app.css';
import one from './imgs/one.jpg';
import two from './imgs/two.jpg';
import three from './imgs/three.jpg';
import four from './imgs/four.jpg';
import five from './imgs/five.jpg';
import six from './imgs/six.jpg';


class ImageSection extends Component {
    render() {
        return(
            <div>
                <div>
                    <img className="prof_pic" src={one} />
                    <img className="prof_pic" src={two} />
                    <img className="prof_pic" src={three} />
                    <img className="prof_pic" src={four} />
                    <img className="prof_pic" src={five} />
                    <img className="prof_pic" src={six} />
                </div>
            </div>
        )
    }
}

export default ImageSection;

• javascript
• image
• reactjs

Share Improve this question Follow edited Sep 21, 2017 at 4:35 t1m1t asked Sep 21, 2017 at 3:29 t1m1tt1m1t 5311 gold badge11 silver badge44 bronze badges 2

• yup its definitely doable. can you post some code? – azium Commented Sep 21, 2017 at 3:43
• Sorry! Forgot to add the code. It has now been added :) – t1m1t Commented Sep 21, 2017 at 4:07

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

Make the parent ponent send a function that will be received by props by the children ponent (the one with the images) and by clicking on the image will send information back to the parent on the function. This will allow children to parent munication and will also allow you to send any additional parameters for custom logic. The parent function can then setState or whatever you want depending on the information relayed from the click event on the image.

class App extends Component{
    constructor(props){
        super(props);

        // set the state to handle which of the panes displays the information you want

        this.image_clicked = this.image_clicked.bind(this);
    }

    render(){
        return (
            <div className="main_section">
                <div className="top_pane_area">
                    <PaneOne />
                    <PaneTwo />
                    <PaneThree />
                </div>
                <div className="bottom_image_area">
                    <ImageSection image_clicked={this.image_clicked}/>
                </div>
            </div>
        )
    }

    image_clicked(source){
        // Based on the source or any additional parameter you send do any re-render logic
        // example:
        if (source == 'image1.png'){
            this.setState({pane1 : source});
        }
    }
}

class ImageSection extends Component {
    render() {
        let image_clicked = this.props.image_clicked;

        return(
            <div>
                <div>
                    <img className="prof_pic" src={one} onClick={() => image_clicked(one)}/>
                </div>
            </div>
        )
    }
}

本文标签： javascriptReact image onClick to display in another componentStack Overflow