React通过onClick将数据从子组件传递给父组件

我是新来做的反应，目前正在使用反应轨应用程序。React通过onClick将数据从子组件传递给父组件

 <h1><img src={activity.image_url}/></h1> 
      <p> {activity.name} </p> 
      <p> Rating: {activity.rating} </p> 
      <p><img src={activity.rating_img_url}/></p> 
      <p>{activity.location.display_address.join(" ")}</p> 
      <p><a href={activity.url}>Learn More</a></p> 
      <input id="add_to" className="btn" type="submit" onClick={props.addto} value="Add to Profile"/>

当前，我正在使用props.data.map((activity) => ...来映射数据。我的问题是，有没有什么办法可以通过点击"Add to Profile"按钮以不同的方式通过.name, .rating, .url etc.（并将其存储到我的父组件使用的变量中）？我一直在寻找答案，但由于缺乏反应经验，我正在努力寻找我能理解的答案。

我也把一个调试器在我的顶级组件，当我点击按钮“添加到档案

handleAddTo(event) { 
    debugger; 
    event.preventDefault(); 
    }

我真的希望得到任何帮助！谢谢您的时间它击中我的调试器。

来源

2017-02-05 joshh45

由于您使用从道具addTo功能，我假设从正确的父组件来了，所以你可以做什么值只是绑定到这个功能就像

<input id="add_to" className="btn" type="submit" onClick={props.addto.bind(this, activity.name, activity.rating, activity.rating_img_url)} value="Add to Profile"/>

来源

2017-02-05 04:40:38

太谢谢你了！我不知道你可以使用.bind ...（这个.. /将这些值绑定到你的函数 – joshh45

它解决了你的问题，如果它有帮助，你能接受这个答案吗？ –

您只需通过你的父母希望值一样

<input id="add_to" className="btn" type="submit" onClick={props.addto(activity.name, activity.rating, activity.rating_img_url)} value="Add to Profile"/>

，并用它

handleAddTo(name, rating, imgUrl) { 
// do something with values 
}

来源

2017-02-05 04:48:38 duwalanise

非常感谢你，感谢你扩展在我的handleAddTo函数！你们都很棒！ – joshh45

如果它可以工作，你可以接受答案:)。 – duwalanise

React通过onClick将数据从子组件传递给父组件

回答

相关问题