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

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

---

一种方法是跟踪状态的行索引。例如，为按钮提供

id

，该按钮等于行的索引

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

这样，您就有了状态中单击行的索引，您可以更改逻辑以将

组件显示为

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

{this.state.showbutton&&（this.state.showButtonIndex==索引）&&}

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

---

工作代码

一种方法是跟踪状态上的行索引。例如，为按钮提供

id

，该按钮等于行的索引

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

这样，您就有了状态中单击行的索引，您可以更改逻辑以将

组件显示为

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

{this.state.showbutton&&（this.state.showButtonIndex==索引）&&}

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

---

工作代码

我不理解按钮的预期行为，但是，这似乎是创建按钮的相关代码

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

handleEdit=（e）=>{
e、 预防默认值（）；
这是我的国家({
showbutton：正确
});
};
render（）{
console.log（this.state.names）；
返回(
姓名：
名称
{this.state.names.map（（名称，索引）=>{
返回(
{name}
this.handleEdit（e）}>
编辑
{this.state.showbutton&&}
);
})}
);
}

可以在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>
    );
  }

handleEdit=（e，id）=>{
e、 预防默认值（）；
console.log（id）；
这是我的国家({
showbutton：正确
});
};
render（）{
console.log（this.state.names）；
返回(
姓名：
名称
{this.state.names.map（（名称，索引）=>{
返回(
{name}
this.handleEdit（e，index）}>
编辑
{this.state.showbutton&&}
);
})}
);
}

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

---

代码是

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

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

handleEdit=（e）=>{
e、 预防默认值（）；
这是我的国家({
showbutton：正确
});
};
render（）{
console.log（this.state.names）；
返回(
姓名：
名称
{this.state.names.map（（名称，索引）=>{
返回(
{name}
this.handleEdit（e）}>
编辑
{this.state.showbutton&&}
);
})}
);
}

可以在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>
    );
  }

handleEdit=（e，id）=>{
e、 预防默认值（）；
console.log（id）；
这是我的国家({
showbutton：正确
});
};
render（）{
console.log（this.state.names）；
返回(
姓名：
名称
{this.state.names.map（（名称，索引）=>{
返回(
{name}
this.handleEdit（e，index）}>
编辑
{this.state.showbutton&&}
);
})}
);
}

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

代码是

我做了一些更改

将状态转换为每个id中都包含showbutton的对象数组

更改函数以处理额外的参数id

我做了一些改变

将状态转换为每个id中都包含showbutton的对象数组

更改函数以处理额外的参数id

---

请在问题本身中显示相关的按钮渲染代码请在问题本身中显示相关的按钮渲染代码这似乎是正确的，但没有提供所需的输出。我想，需要添加一个管理索引的状态。如果你点击任何一个按钮，它会给你一个数字0-2作为按钮的索引，因为有三个按钮，有三个索引。您可以按照自己的意愿实现它。我个人认为它比oth更有效率