单击子组件获取父组件属性

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>

)

说明

我目前能够获取该值，但如果我还想获取父元素的description 属性怎么办？

Answer 1

我不确定我是否理解正确，但我认为您只需将一个额外的参数传递给父级的回调/处理程序。

也许这样的事情可能会有所帮助：

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