当有多个按钮时如何知道点击了哪个按钮（React）

Question

我在功能组件中有一个表。表格中的每一行在该行的末尾都有一个编辑按钮。当我单击“编辑”按钮时，它会将更改应用于所有编辑按钮。我如何知道单击了哪个按钮并仅对其应用更改？（我有很多行，所以我不能为每个按钮创建一个状态）

这是我的代码的链接

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

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

工作代码在这里