Reagieren Übergabe von Daten von Kind-Komponente auf Eltern-Komponente über ein OnClick

Question

Ich bin neu zu reagieren und arbeite derzeit an einer React Rails-Anwendung.

 <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"/> 

Derzeit dies ich props.data.map((activity) => ... bin mit über die Daten abzubilden. Meine Frage ist, gibt es irgendwelche Möglichkeiten, die ich in der nach dem Klicken auf die Schaltfläche "Add to Profile" irgendwie weitergeben könnte (und speichern Sie es in eine Variable für meine Elternkomponente zu verwenden)? Ich habe überall nach einer Antwort gesucht, aber aufgrund meiner mangelnden Erfahrung mit der Reaktion habe ich Mühe, eine Antwort zu finden, die ich verstehen kann. für Ihre Zeit

Ich habe auch einen Debugger in meiner Top-Level-Komponente setzen und es trifft meinen Debugger, wenn ich auf den Button „Hinzufügen

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

ich wirklich auf diesem jede mögliche Hilfe schätzen würde zum Profil! Danke .

Answer 1

Da Sie die addTo Funktion von den Requisiten verwenden ich gehe davon aus, dass von der richtigen Elternkomponente kommt und damit, was Sie tun können, nur die Werte in dieser Funktion wie

<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"/> 

binden

Answer 2

Sie können nur Werte übergeben Sie Eltern wollen wie

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

und es verwenden,

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