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

をプロファイルに追加私は本当にこの上の任意の助けをいただければ幸いです！お時間をいただき、ありがとうございます。

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 
}