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

Question

我有一个 table，其中每一行都有一个按钮。此按钮显示一个 onClick event，它在下方添加了两个按钮元素。

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

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

Note ：我正在使用 material table 并且在其中一列中我有一个 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);
  };

Answer 1

因此查看文档，table 列的自定义呈现方法看起来像这样：

render: rowData => <YourCustomComponent />

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

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

我为此添加了一个单独的点击处理程序，这不是必需的，但它有助于将事情分开。所以现在您需要一个 'row aware' 的点击处理程序 - 通常它看起来像这样：

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

最后，您可以在任何要呈现按钮的地方使用此 id show/hide，因此如果它在另一列呈现方法中：

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

预计到达时间：关于您的附加问题

I don't know how to pass the key to the button either : onClick={ handleHover(time.teamMember[1])}

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

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

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

Prevent onClick event to happen in all rows instead of one sigle row per click

reactjs

typescript

events

render

material-table