html单元格点击后填充颜色,react引用Ant Design后，表格点击时添加背景色

问题描述：

Antd中新建一个表格后，默认只添加了鼠标经过事件，即：鼠标经过表格的每一行时，那一行就会添加一个淡色的背景。但是现在有需求，要给表格添加一个点击事件，就是在点击每一行时，也会添加一个背景效果。

1、在

showHeader={false}

columns={columns}

dataSource={this.state.data}

bordered={true}

onRow={(record) => {

return {

onClick: (event) => {

this.setState({

rowId: record.key,

});

this._tableOnclick(event);   //调用表格点击事件

},       // 点击行

onDoubleClick: (event) => {},

onContextMenu: (event) => {},

onMouseEnter: (event) => {},  // 鼠标移入行

onMouseLeave: (event) => {}

};

}}

rowClassName={this.setRowClassName}

/>

2、编写行点击事件和行添加类事件，如下代码：//表格添加点击背景色事件

setRowClassName = (record) => {

return record.key === this.state.rowId ? 'clickRowStyl' : '';

}

3、最后在样式文件中编写相应的样式代码：.clickRowStyl{

background-color:lightgray

}

.ant-table-tbody>.clickRowStyl:hover>td{

background-color:lightgray

}

4、最后效果如下图所示：

作者：X北辰北

链接：https://xuqwblog.blog.csdn.net/article/details/90606241

来源：CSDN

著作权归作者所有，转载请联系作者获得授权，切勿私自转载。