如何解决使用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
注意:我只对顶级表的前两行应用了行选择。此解决方案将需要进行干燥处理,但应为您提供实现方法的一个思路。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。