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。
原文链接：https://blog.csdn.net/u010234868/article/details/141667883