Question

Parent component
Child Component

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

有人可以帮忙吗？这是我第一次进行反应。

我尝试在子组件render方法中添加事件处理程序，但这不起作用。我尝试搜索解决方案，但没有找到解决方案。如果我可以通过提升状态来实现，那么我将如何实现。

Answer 1

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

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

1 个答案: