我是React js的新手,我很困惑如何通过onclick事件将数据从子组件发送到父组件。
父组件
...
onTurn(id){
console.log(id)//undefined
}
renderCardsList(){
const {cardsList} = this.props
return cardsList.get('cards').map(({id,front_image}) => {
return <Card
image={front_image}
onTurn={this.onTurn}
/>
})
}
...
子组件
const Card = (props) => {
return(
<div className="singleCard">
<div className="imageDiv">
<img src={props.image} alt="work" />
</div>
<div className="bottombar">
<span onClick={e => props.onTurn(props.id)} className="glyphicon glyphicon-refresh" />
<span className="glyphicon glyphicon-pencil" />
<span className="glyphicon glyphicon-pushpin" />
</div>
</div>
)
};
最佳答案
您的onClick
需要id
上的props
属性:
onClick={e => props.onTurn(props.id)}
但您没有提供以下服务:
return <Card
image={front_image}
onTurn={this.onTurn}
/>
很自然,卡的
props.id
中的render
是undefined
。如果您希望卡的
id
上有一个props
,则需要指定一个,例如:return <Card
image={front_image}
onTurn={this.onTurn}
id={/*something*/}
/>