Erhalte die Eigenschaften der Elternkomponente beim Klicken auf die Kindkomponente

Question

Ich bin nicht sicher, ob dies der richtige Weg ist, um mein Problem zu lösen, also bin ich offen für andere Methoden.

Wenn ich auf eine untergeordnete Komponente (Image) klicke, möchte ich auf die Eigenschaften der übergeordneten Komponente zugreifen können. Hier ist mein Code so weit:

geordnete Komponente

import {Image, Grid, Row, Col} from 'react-bootstrap'; 
import React, { Component } from 'react'; 
import localForage from 'localforage'; 
import Activity from './activity'; 


testClick(e){ 
    console.log("click handled", e.target.getAttribute('value')); 
} 

render() { 
    return (
     <Grid> 
      <Row> 
       <Col sm={4} smPush={4}> 
        <h2 className="center-header">Explore Ibiza</h2> 
       </Col> 
      </Row> 
      <Row /> 
       <Activity handleClick={(e)=>{this.testClick(e)}} description="Dining" imageSource="https://lonelyplanetimages.imgix.net/mastheads/95971965.jpg?sharp=10&vib=20&w=1200" /> 
       <Activity description="Diving" imageSource="https://media-cdn.tripadvisor.com/media/photo-s/06/8d/1f/6a/linda-playa.jpg"/> 
       <Activity onClick={this.handleClick} description="Boating" imageSource="https://lvs.luxury/wp-content/uploads/2015/06/1.jpg"/> 
      <Row /> 
     </Grid> 
    ) 
} 

Kinder Komponente

return(
<Col sm={4}> 
    <p>{props.description}</p> 
    <Image onClick={props.handleClick} value={props.description} src={props.imageSource}className="activity-image margin-bottom-5"/> 
</Col> 

)

Erklärung

Ich bin derzeit in der Lage, den Wert zu erhalten, aber wenn, wenn ich die description Eigenschaft des übergeordneten Elements auch erhalten möchte?

Answer 1

Ich bin mir nicht sicher, ob ich Sie richtig verstanden habe, aber ich denke, dass Sie nur einen zusätzlichen Parameter an den Callback/Handler des Elternteils übergeben müssen.

Vielleicht helfen so etwas wie dieses kann:

<Image onClick={e => this.props.handleClick(e, props.description)} ...