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

Question

Parent component
Child Component

我正在尝试实现以下功能：我有一个 parent 按钮（问题），单击它会呈现一个 child 组件。 child 组件 returns 从 database.Now 单击每个按钮获取的多个结果（所有问题作为按钮）我应该能够获得整个问题数据：问题编辑于，更新于、标题、描述等

谁能帮帮我，这是我第一次做 React。

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

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)}>

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

How to add event handler to a child component that renders multiple results?

parent-child

event-handling

reactjs