React Передача данных из дочернего компонента в родительский компонент с помощью 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) => ... для отображения над данными. Мой вопрос: есть ли какие-либо способы, которые я мог бы каким-то образом передать в .name, .rating, .url etc., нажав кнопку "Add to Profile" (и сохраните его в переменной для моего родительского компонента)? Я искал ответы на все вопросы, но из-за моего отсутствия опыта реагирования я изо всех сил пытаюсь найти ответ, который я могу понять.

Я также поставил отладчик в моем верхнем компоненте уровня и она попадает мой отладчик, когда я нажимаю на кнопку «Добавить в профиль

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 
}