使用 React 为 Table 行 onHover 和 onClick 着色

Question

当 onHover 和 onClick 事件通过 js 和 css 发生时，我一直在尝试为我的 Table 着色，但我有相同的两者都有问题.. 如果光标离开 <tbody> 活动会立即恢复为旧颜色。

我想做的是，当您单击 table 中的 row 时，它会保持活动状态，直到单击另一个 row。

对于 css 解决方案，我使用的是：

.hoverClass:hover {
  background: red;
}
.hoverClass:active {
  background: yellow;
}

对于 js 解决方案：

  onTableRowClicked = (e) => {
    this.setState({ currentColoringTarget: e });
    e.currentTarget.style.background = "#EEE55E";
  };

  changeTableRowBackgroundOnMouseOver = (e) => {
    e.currentTarget.style.background = "#EEEEEE";
  };

  changeTableRowBackgroundOnMouseOut = (e) => {
    e.currentTarget.style.background = "transparent";
  };

...
<tbody
  onClick={(e) => this.onTableRowClicked(e)}
  onMouseOver={this.changeTableRowBackgroundOnMouseOver}
  onMouseOut={this.changeTableRowBackgroundOnMouseOut}
>
  <tr>
    <th className="vertically-aligned-th">
      <strong>1)</strong>
    </th>
    <th className="vertically-aligned-th">21314</th>
    <th className="vertically-aligned-th">address2</th>

    <th>
      <Button className="acceptButton">Accept</Button>
    </th>
    <th>
      <Button className="declineButton">Decline</Button>
    </th>
  </tr>
</tbody>
...

这里是 CodeSandBox 代码。

Answer 1

您的方向是正确的，但与其直接通过 style.backgroundColor 触摸 DOM，您还可以使用一些 React 状态来跟踪行的 ID，然后应用选定的 class 处理样式。

我已经更新了沙盒，让您了解如何执行此操作。 https://codesandbox.io/s/elegant-lewin-duqt6?file=/src/App.js

注意：我只对顶部的前两行应用了行选择 table。此解决方案需要 DRYing out，但应该让您了解如何实现它。

使用 React 为 Table 行 onHover 和 onClick 着色

Coloring Table rows onHover and onClick using React

javascript

onclick

onhover

reactjs

react-native