我是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中的renderundefined

如果您希望卡的id上有一个props,则需要指定一个,例如:

return  <Card
    image={front_image}
    onTurn={this.onTurn}
    id={/*something*/}
    />

10-07 16:27
查看更多