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

Question

父组件
子组件

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

任何人都可以帮忙这是我第一次做反应。

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

Answer 1

如果我理解正确，您将多个问题显示为您在子组件中获取的button，并且您希望在用户单击按钮时捕获整个问题对象。

您需要做的是将问题 Object 传递给您的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)}>