子コンポーネントをクリックしたときに親コンポーネントのプロパティを取得する

Question

これは私の問題について正しい方法であるかどうかはわかりませんので、私は他のメソッドも開いています。

子コンポーネント（画像）をクリックすると、親コンポーネントのプロパティにアクセスできるようにしたいと考えています。ここに私のコードは、これまでです：

親コンポーネント

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

子コンポーネント

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> 

）

説明

私は現在値を取得することができますが、親要素のプロパティも取得したい場合はどうなりますか？

Answer 1

あなたを正しく理解しているかどうかはわかりませんが、親のコールバック/ハンドラに余分なパラメータを渡すだけでよいと思います。

はたぶん、このようなものが役立つことがあります。

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