如何将事件处理程序添加到呈现多个结果的子组件？

【问题标题】：How to add event handler to a child component that renders multiple results?如何将事件处理程序添加到呈现多个结果的子组件？
【发布时间】：2019-06-06 14:53:35
【问题描述】：

Parent component
Child Component

我正在尝试实现以下功能：我有一个父按钮（问题），单击该按钮将呈现一个子组件。子组件返回从数据库中获取的多个结果（所有问题作为按钮）。现在单击每个按钮我应该能够获取整个问题数据：问题编辑于、更新于、标题、描述等。

谁能帮帮我这是我第一次做react。

我尝试在子组件渲染方法中添加事件处理程序，但这不起作用。我尝试搜索解决方案，但找不到。如果我可以使用提升状态来实现这一点，我将如何实现它。

【问题讨论】：

如果您与我们分享一些代码，会更容易帮助您:)
我添加了截图，请查看。
好的，我想我知道你想做什么

标签： reactjs event-handling parent-child

【解决方案1】：

如果我理解正确，您将在子组件中获取的多个问题显示为buttons，并且您希望在用户单击按钮时捕获整个 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)}>

【讨论】：

先生，非常感谢它以这种方式工作。:) 我在装订时犯了一个错误。