防止 onClick 事件在所有行中发生，而不是每次单击发生一行答案

【问题标题】：Prevent onClick event to happen in all rows instead of one sigle row per click防止 onClick 事件在所有行中发生，而不是每次单击发生一行
【发布时间】：2021-08-02 15:57:27
【问题描述】：

我有一个表格，其中每行都有一个按钮。这个按钮显示一个onClick event，它在下面添加了两个按钮元素。

会发生什么：当我点击一个按钮时，onClick event 会在每一行中完成，而不仅仅是我点击的那一行。

我期望发生的事情：当点击 one 行中的按钮时，该事件在该单行上完成。

Note：我正在使用材料表，在其中一列中我有一个render method，按钮的结构如下：

<Button
              disableRipple
              className={(classes.buttonState, classes.textButtonStatePending)}
              onMouseEnter={handleHover} //makes the buttons appear
              onMouseLeave={handleHoverAway} //makes the buttons dissapear
              onClick={handleHover}
              onChange={handleHover}
            >
              Pending
            </Button>

这是我将鼠标悬停在按钮上的事件，它必须显示我的组件：

const handleHover = (): void => {
    setShowButtonGroup(true);
  };

【问题讨论】：

你能把event.stopPropagation();放到你的handleHover函数中
您需要为每一行使用一个唯一标识符，例如 id，这样您就可以将其传递给您的 onClick 处理程序并知道点击了哪一行
@AmruthLS 是从 REact 导入的方法吗？看看我的功能： const handleHover = (): void => { setShowButtonGroup(true);停止传播（）； };
不需要handleHover(event){ event.stopPropagation(); }你的函数应该是这样的
@WillJenkins 你可能是对的......你能给我一个关于如何在代码中做到这一点的例子吗？

标签： reactjs typescript events render material-table

【解决方案1】：

所以看看文档，它看起来像一个表格列的自定义渲染方法看起来像这样：

render: rowData => <YourCustomComponent />

在您的情况下，您正在渲染带有一堆处理程序的<Button>，包括onClick。假设您的 rowData 具有某种独特的价值，例如 id，您可以使用它来将按钮单击绑定到行：

render: rowData => <Button onClick={() => handleClick(row.id)}>Pending</Button>

我为此添加了一个单独的点击处理程序，这不是必需的，但它有助于保持独立。所以现在你需要一个“行感知”的点击处理程序——通常这可能看起来像这样：

const handleClick = (id): void => {
    setVisibleRowId(id)
 };

最后，您可以在渲染要显示/隐藏的按钮的任何位置使用此 id，因此如果它在另一个列渲染方法中：

render: rowData => rowData.id === visibleRowId ? <Button>My row was clicked</Button> : undefined

ETA：关于您的其他问题

我也不知道如何将密钥传递给按钮：onClick={ handleHover(time.teamMember[1])}

这将在每次渲染时调用您的 handleHover 函数，这是您不想要的。您已将此调用包装在一个新函数中 - 即传递一个仅在单击时调用的函数：

onClick={() => handleHover(time.teamMember[1])}

【讨论】：

谢谢我已经这样尝试过了：onClick={() => handleClickHover(rowData.id)}