onClick을 통해 자식 구성 요소에서 부모 구성 요소로 데이터 전달하기

Question

저는 반응이 새로운데 현재 반응 레일 응용 프로그램에서 작업 중입니다.

 <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(); 
    } 

난 정말이에 어떤 도움을 주셔서 감사합니다 것 프로필에 추가 I 버튼을 클릭하면 내 디버거 안타

.

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

당신은

<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 
}