我可以动态更改antd table 的特定tr 的className 吗？

Question

我的 ant 设计的每个 tr 中都有一个切换按钮 table，当用户点击它时，我想 add/remove 一个特定的 class to/from它的父 tr.

我知道有一些方法可以使用 vanilla js，但我正在使用 React 库进行编码，所以我不想直接操作 DOM。

更准确地说，我已经试过了rowClassName，但没有用！（它将给定的 class 添加到所有行。）

Answer 1

检查下面的例子，index.css文件有CSS根据Switch值改变行的背景颜色，并移除antd的默认悬停效果

index.css

.row-light {
  background-color: #b6c5f5;
}

.row-dark {
  background-color: #84eb84;
}

.ant-table-thead>tr.ant-table-row-hover:not(.ant-table-expanded-row)>td, 
.ant-table-tbody>tr.ant-table-row-hover:not(.ant-table-expanded-row)>td, 
.ant-table-thead>tr:hover:not(.ant-table-expanded-row)>td, 
.ant-table-tbody>tr:hover:not(.ant-table-expanded-row)>td {
   background: unset; 
}

下面是react代码，它使用antd table的rowClassName 属性来改变行数css class。

Demo.js

import React from 'react';
import 'antd/dist/antd.css';
import './index.css';
import { Table, Switch } from 'antd';
import { useState } from 'react';

const Demo = () => {
const [users, setUsers] = useState([
{
  key: '1',
  name: 'John Brown',
  age: 32,
  toggle: true,
},
{
  key: '2',
  name: 'Jim Green',
  age: 42,
  toggle: false,
},
{
  key: '3',
  name: 'Joe Black',
  age: 32,
  toggle: false,
},
{
  key: '4',
  name: 'Peter Black',
  age: 72,
  toggle: true,
},
]);

const columns = [
{
  title: 'Name',
  dataIndex: 'name',
  key: 'name',
},
{
  title: 'Age',
  dataIndex: 'age',
  key: 'age',
},
{
  title: 'Action',
  key: 'toggle',
  render: (text, record) => (
    <Switch
      size="small"
      onChange={(value) => onSwitchChange(record, value)}
      checked={record.toggle}
    />
  ),
},
];

/* Updates the toggle property(true or false) of selected user */
const onSwitchChange = (record, value) => {
 let key = record.key;
 let data = users.map((user) => {
  if (user.key === record.key) 
  return { ...user, toggle: value };
  else return user;
});
setUsers(data);
console.log(users);
};

return (
<Table
  rowClassName={(record, index) =>
    record.toggle === true ? 'row-light' : 'row-dark'
  }
  columns={columns}
  dataSource={users}
/>
);
};
export default Demo

我可以动态更改antd table 的特定tr 的className 吗？

Can I change className of the antd table's specific tr dynamically?

reactjs

antd