javascript - 当有多个按钮时如何知道点击了哪个按钮(React)

Question

我在功能组件中有一个表。表中的每一行的末尾都有一个编辑按钮。当我单击编辑按钮时，它将更改应用于所有编辑按钮。我如何知道单击了哪个按钮并仅对其应用更改？ (我有大量行，因此无法为每个按钮创建状态)

Here is a link to my code

Answer 1

您可以做的一种方法是跟踪状态上的行索引。例如，提供 id到按钮，等于行的索引

 <Button id={index} type="button" onClick={e => this.handleEdit(e)}>

在你的 handleEdit 中功能

  handleEdit = e => {
    e.preventDefault();
    this.setState({
      showbutton: true,
      showButtonIndex: Number(e.target.id)
    });
  };

这样您就有了状态中单击的行的索引，并且您可以更改逻辑以显示 <Edit />组件为

{this.state.showbutton && (this.state.showButtonIndex === index) && <Edit />}

我假设您一次只允许编辑一行。

工作代码here