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將數據從子組件傳遞給父組件

回答

相關問題