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

【问题标题】：How to know which button is clicked when there are multiple buttons (React)当有多个按钮时如何知道单击了哪个按钮（React）
【发布时间】：2019-07-11 00:42:06
【问题描述】：

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

Here is a link to my code

【问题讨论】：

请在问题本身中显示相关的按钮渲染代码

标签： javascript reactjs

【解决方案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

【讨论】：

【解决方案2】：

我不明白按钮的期望行为是什么，但是，这似乎是创建按钮的相关代码

  handleEdit = (e) => {
    e.preventDefault();
    this.setState({
      showbutton: true
    });
  };
  render() {
    console.log(this.state.names);
    return (
      <div>
        <h2> Names: </h2>
        <Table>
          <thead>
            <tr>
              <th>Name</th>
            </tr>
          </thead>
          {this.state.names.map((name, index) => {
            return (
              <tbody>
                <tr>
                  <td> {name} </td>
                  <td>
                    <Button type="button" onClick={e => this.handleEdit(e)}>
                      Edit
                    </Button>
                  </td>
                  {this.state.showbutton && <Edit />}
                </tr>
              </tbody>
            );
          })}
        </Table>
      </div>
    );
  }

您可以在 this.states.map() 函数中看到有一个索引参数被绑定。您可以使用它来跟踪哪个按钮正在调用函数并将其传递给函数

handleEdit = (e, id) => {
    e.preventDefault();
    console.log(id);
    this.setState({
      showbutton: true
    });
  };
  render() {
    console.log(this.state.names);
    return (
      <div>
        <h2> Names: </h2>
        <Table>
          <thead>
            <tr>
              <th>Name</th>
            </tr>
          </thead>
          {this.state.names.map((name, index) => {
            return (
              <tbody>
                <tr>
                  <td> {name} </td>
                  <td>
                    <Button type="button" onClick={e => this.handleEdit(e, index)}>
                      Edit
                    </Button>
                  </td>
                  {this.state.showbutton && <Edit />}
                </tr>
              </tbody>
            );
          })}
        </Table>
      </div>
    );
  }

该示例仅打印单击它的按钮的 ID。您可以以任何必要的方式利用它来唯一标识按钮。

代码是here

【讨论】：

这似乎是正确的，但没有给我想要的输出。我想，需要添加一个管理索引的状态
如果你点击任何一个按钮，它会给你一个数字0-2作为按钮的索引，因为有三个按钮，所以有3个索引。你可以随心所欲地实现它。我个人认为它比其他答案更有效，因为您没有为每个按钮创建一个 id。我不明白你的意思是它没有所需的行为。
我尝试运行它，但是当我单击 1 个按钮时，它会为所有按钮显示字符串“编辑名称”；所以输出与问题中的输出相同。
是的，我用console.log把它放在控制台中，你必须打开控制台才能看到输出
所以当我调用编辑组件时；我也应该通过索引吗？因为我只想在按钮前面看到字符串，所以我没有点击所有按钮

【解决方案3】：

我做了一些更改here

将状态转换为对象数组，每个 id 中都有 showbutton。
更改处理额外参数 id 的函数

【讨论】：