通过onClick反应将数据从子组件传递到父组件

Question

I am new to react and am currently working on a react rails application.

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

Currently, this I am using props.data.map((activity) => ... to map over the data. My question is are there any ways I could somehow pass in the .name, .rating, .url etc. upon clicking the "Add to Profile" button (and store it into a variable for my parent component to use)? I have been looking all over for an answer but due to my lack of experience with react, I am struggling to find an answer I can understand.

I have also put a debugger in my top level component and it hits my debugger when I click the button "Add to Profile

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

I really would appreciate any help on this! Thank you for your time.

Answer 1

由于您正在使用道具中的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"/>

Answer 2

You can just pass values you want in parents like

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

and use it

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