Antd Table 点击行变换背景颜色 (Antd React)

需求

实现的目标是，点击这一行，然后出现一个modal，这个modal可以拖拽，并且可以知道是点击哪一行出现的事件。

那么需要做的就是，点击这一行，然后其背景颜色变化。

实现

Antd Table有 rowClassName 属性，可以在 css设置其样式，那么我们只要

点击行，然后记录点击的 rowkeyrowClassName设为一个函数，读取(record, index) ，判断其index 是否等于rowkey，如果等于就return一个类名。

代码

{/* Table组件，其中在 onClick中，setState 记录 rowkeywei */}<Table id="table-to-xls"size="small"loading={loading}columns={columns}dataSource={data}pagination={{pageSize: 10 }}rowKey={record => record.uid}rowClassName={this.getRowClassName}onRow={(record, rowkey)=>{return{//点击行 record 指的本行的数据内容，rowkey指的是本行的索引onClick : this.onClick.bind(this, record, rowkey) }}}/>// 函数getRowClassName = (record, index) => {const clickRow = this.state.clickRow;let className = 'normal';if(index === clickRow) {className = 'blue';}return className;}<!-- css代码 -->.blue {background-color: #00a0e9;}