Question

我是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>
    )
};

Answer 1

您的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*/}
    />

通过onclick事件从子节点发送数据到父节点React js？

1 个答案: