手动触发antd表的onSelectAll回调

jsximport React, { useState } from 'react';
import { Table, Checkbox, Button } from 'antd';

const dataSource = [
  { key: '1', name: 'John Doe', age: 32, address: 'New York' },
  { key: '2', name: 'Jane Smith', age: 28, address: 'London' },
  { key: '3', name: 'Jim Brown', age: 40, address: 'Sydney' },
];

const columns = [
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Age', dataIndex: 'age', key: 'age' },
  { title: 'Address', dataIndex: 'address', key: 'address' },
];

const App = () => {
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);

  // 自定义的全选处理函数
  const onSelectAll = (checked) => {
    if (checked) {
      setSelectedRowKeys(dataSource.map(record => record.key));
    } else {
      setSelectedRowKeys([]);
    }
    // 如果你有其他逻辑，比如通知父组件，可以在这里处理
    console.log(`全选状态: ${checked}`);
  };

  // 手动触发全选的函数
  const triggerSelectAll = (selectAll) => {
    onSelectAll(selectAll);
  };

  const rowSelection = {
    selectedRowKeys,
    onChange: (newSelectedRowKeys) => {
      setSelectedRowKeys(newSelectedRowKeys);
    },
    onSelectAll: onSelectAll, // 绑定自定义的全选处理函数
  };

  return (
    <div>
      <Button onClick={() => triggerSelectAll(true)}>手动全选</Button>
      <Button onClick={() => triggerSelectAll(false)}>取消全选</Button>
      <Table
        rowSelection={rowSelection}
        dataSource={dataSource}
        columns={columns}
      />
    </div>
  );
};

export default App;