区分Antd (ant设计)表React组件中的行点击

import { Table } from 'antd';

const handleRowClick = (record) => {
  // 处理行点击事件
  console.log('点击的行数据：', record);
};

const dataSource = [
  { id: 1, name: '张三', age: 20 },
  { id: 2, name: '李四', age: 25 },
  { id: 3, name: '王五', age: 30 },
];

const columns = [
  { title: 'ID', dataIndex: 'id' },
  { title: '姓名', dataIndex: 'name' },
  { title: '年龄', dataIndex: 'age' },
];

const App = () => (
  <Table
    dataSource={dataSource}
    columns={columns}
    onRowClick={handleRowClick}
  />
);

export default App;

import { Table } from 'antd';

const handleRowClick = (record) => {
  // 处理行点击事件
  console.log('点击的行数据：', record);
};

const dataSource = [
  { id: 1, name: '张三', age: 20 },
  { id: 2, name: '李四', age: 25 },
  { id: 3, name: '王五', age: 30 },
];

const columns = [
  { title: 'ID', dataIndex: 'id' },
  { title: '姓名', dataIndex: 'name' },
  { title: '年龄', dataIndex: 'age' },
];

const CustomRow = ({ record }) => (
  <tr onClick={() => handleRowClick(record)}>
    <td>{record.id}</td>
    <td>{record.name}</td>
    <td>{record.age}</td>
  </tr>
);

const App = () => (
  <Table
    dataSource={dataSource}
    columns={columns}
    rowKey="id"
    rowClassName={() => 'custom-row'}
    components={{
      body: {
        row: CustomRow,
      },
    }}
  />
);

export default App;