使用React为表行onHover和onClick着色

问题描述

当Table和onHover都发生onClick和js事件时，我一直在尝试给css上色，但是我也遇到相同的问题两者都..如果光标离开<tbody>，则活动内容立即恢复为旧颜色。

我想做的是，当您单击表中的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。

解决方法

您朝着正确的方向前进，而不是直接通过style.backgroundColor接触DOM，您可以使用一些React状态来跟踪行的ID，然后应用一个选择的类来处理样式。

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

注意：我只对顶级表的前两行应用了行选择。此解决方案将需要进行干燥处理，但应为您提供实现方法的一个思路。