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

需求

实现的目标是，点击这一行，然后出现一个modal，这个modal可以拖拽，并且可以知道是点击哪一行出现的事件。
那么需要做的就是，点击这一行，然后其背景颜色变化。

实现

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

1. 点击行，然后记录点击的 rowkey
2. rowClassName设为一个函数，读取(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;
	}