react antd点击table行时加选中背景色

在React中使用Ant Design的Table组件时，可以通过rowSelection属性来实现点击行时加亮背景色的功能。 

import React from 'react';
import { Table } from 'antd';
 
const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  // ... 更多数据
];
 
class App extends React.Component {
  state = {
    selectedRowKeys: [], // 选中的行的keys
  };
 
  onRowClick = (record, rowKey) => {
    // 更新选中的行的keys
    this.setState({ selectedRowKeys: [rowKey] });
  };
 
  render() {
    const { selectedRowKeys } = this.state;
 
    return (
      <Table
        dataSource={data}
        rowSelection={{
          selectedRowKeys,
          onChange: this.onRowClick,
        }}
        rowClassName={(record, index) =>
          selectedRowKeys.includes(index.toString()) ? 'ant-table-row-selected' : ''
        }
        columns={[
          {
            title: 'Name',
            dataIndex: 'name',
          },
          {
            title: 'Age',
            dataIndex: 'age',
          },
          {
            title: 'Address',
            dataIndex: 'address',
          },
        ]}
      />
    );
  }
}
 
export default App;

state变量selectedRowKeys来记录选中的行的key。onRowClick方法会在行点击时被调用，并更新selectedRowKeys。rowSelection属性用于配置行选择功能，而rowClassName属性用于根据行的key给行添加特定的className，从而实现加亮背景色的效果。

点击表格的一行时，该行的背景色会变为蓝色（Ant Design默认主题的选中颜色），同时selectedRowKeys会被更新为当前点击的行的key。