antd的table，点击某行改变这行的样式颜色(react)

需求理解 ：

需求1: antd的table，点击某行改变这行的样式颜色，同时保持有奇偶行颜色的区别和改变hover的颜色。

需求2: 再次点击改变了的颜色的行，去跳转某个页面，而不是双击

注意：

1: onRow的写法要注意了， 写的不好会自动调用的

2: 样式我是用styles 去管理的 ，所以return 的样式字符串，根据你需求改，会不一样

import Users from './user';
import Card from './css/Card';
import { Table, ConfigProvider } from 'antd';
import styles from './index.less';
import { useState } from 'react';

export default () => {
  const [RowIndex, setRowIndex] = useState();
  const [DoubleClickRow, setDoubleClickRow] = useState(0);
  const dataSource = [];
  for (let i = 1; i < 101; i++) {
    dataSource.push({
      key: i,
      name: `Edward King ${i}`,
      age: 32,
      address: `London, Park Lane no. ${i}`,
    });
  }
  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '住址',
      dataIndex: 'address',
      key: 'address',
    },
  ];
  const onClickRow = (event, index) => {
    setRowIndex(index);
    if (DoubleClickRow === index) console.log('setDoubleClickRow'); //如果再次点击了改变样式的行，执行
  };
  const onDoubleClickRow = (event, index) => {
    console.log('onDoubleClickRow'); //快速双击某行执行
  };
  const rowClassNamefun = (rowitem, i) => {
    if (i === RowIndex) {
      setDoubleClickRow(i);
      return `${styles.rowBgColor}`; //点击某行改变行样式
    } else {
      return i % 2 === 0 ? `${styles.oddRow}` : `${styles.evenRow}`; //奇偶行样式
    }
  };
  return (
    <div>
      {/* <Users></Users> */}
      {/* <Card></Card> */}
      <div className={styles.tableaaa}>
        <ConfigProvider
          theme={{
            components: {
              Table: {
                headerBg: '#f6a04d',
              },
            },
          }}
        >
          <Table
            scroll={{ y: 600 }}
            rowKey={(record) => record.id}
            rowClassName={rowClassNamefun}
            onRow={(event, index) => {
              return {
                onClick: () => onClickRow(event, index),
                onDoubleClick: () => onDoubleClickRow(event, index), //双击需求，但不是需求要的
              };
            }}
            dataSource={dataSource}
            columns={columns}
          />
        </ConfigProvider>
      </div>
    </div>
  );
};

.tableaaa {
  .oddRow {
    //奇数行
    background: #eeeeee;
  }
  .evenRow {
    //偶数行
    background: #d0d0d0;
  }
  .rowBgColor {
    //点击选中某一行的颜色
    background-color: #f6a04d;
    color: #ffff;
  }
  :global {
    //hover 的颜色
    .ant-table-tbody {
      > tr:hover:not(.ant-table-expanded-row) > td,
      .ant-table-row-hover,
      .ant-table-row-hover > td {
        background: #f6a04d;
        color: #ffff;
      }
    } //hover 的颜色
    .ant-table-fixed {
      .ant-table-row-hover,
      .ant-table-row-hover > td {
        color: #ffff;
      }
    }
  }
}