Question

我不确定这是否是解决问题的正确方法，所以我也对其他方法持开放态度。

当我点击子组件（Image）时，我希望能够访问父组件的属性。到目前为止，这是我的代码：

父组件

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

点击子组件

1 个答案: