Как добавить обработчик событий в дочерний компонент, который отображает несколько результатов?

Question

Родительский компонент
Дочерний компонент

Я пытаюсь добиться такой функциональности, как: У меня есть родительская кнопка (Вопросы), по нажатию которой будет отображаться дочерний компонент. Дочерний компонент возвращает несколько результатов (Все вопросы в виде кнопок), которые извлекаются из базы данных. Теперь, нажимая на каждую кнопку, я могу получить все данные вопроса: вопрос, отредактированный, обновленный, заголовок, описание и т. Д.

Может кто-нибудь помочь, это первый раз, когда я работаю над реакцией.

Я попытался добавить обработчик событий в метод рендеринга дочернего компонента, но это не работает. Я пытался найти решение, но не смог его найти. Если я смогу достичь этого, подняв состояние, как бы я его достиг.

Answer 1

Если я правильно понял, вы отображаете несколько вопросов как button s, которые вы выбираете в своем дочернем компоненте, и вы хотите перехватить весь объект question , когда пользователь нажимает кнопку.

Что вам нужно сделать, это передать вопрос объекта в вашу функцию handleQues.

дочерний компонент

  render(){
    //Rest of your code
    {content.map((p, index) => {
      return (
        <span key={index}>
          <button onClick={this.handleQues.bind(this, p)}>
            {p.title}
          </button>
          <br />
        </span>
       );
     })
    //Rest of your code
  }

В вашем handleQues у вас будет что-то вроде этого

  handleQues (button) {
    console.log(button);
    //Rest of your code

  }

Примечание: Я использую bind для передачи объекта p на handleQues, но вы также можете использовать функцию стрелки, поэтому ваша кнопка будет выглядеть примерно так

  <button onClick={() => this.handleQues(p)}>