如何手动触发Ant Design表格的onSelectAll回调以实现按钮点击全取消选择

Got it, let's break down how to clear all selected rows in an Ant Design Table when clicking a button like your "Anular selección" one. This approach gives you full control over the selection state and lets you explicitly trigger the onSelectAll callback if needed.

Step 1: Track Selected Rows with State #

First, you'll need to manage the selected row keys in your component's state. This is the core of controlling which rows are selected.

Step 2: Link State to Table Props #

Bind the Table's selectedRowKeys and onChange props to your state. This keeps the table's selection in sync with your component's state when users select/deselect rows normally.

Step 3: Add the Deselect All Button #

When the button is clicked, reset the selected row keys state to an empty array. If you have custom logic in your onSelectAll callback, you can call it manually with the right parameters to trigger that logic.

Full Code Example #

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

const SelectionTable = () => {
  // Sample table data
  const tableData = [
    { key: '1', name: 'Maria Garcia', age: 30 },
    { key: '2', name: 'Luis Rodriguez', age: 27 },
    { key: '3', name: 'Ana Martinez', age: 35 },
  ];

  const columns = [
    { title: 'Nombre', dataIndex: 'name', key: 'name' },
    { title: 'Edad', dataIndex: 'age', key: 'age' },
  ];

  // State to hold selected row keys
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);

  // Handle normal table selection changes
  const handleSelectionChange = (newKeys) => {
    setSelectedRowKeys(newKeys);
    // Your existing selection logic here
  };

  // Handle "Anular selección" button click
  const handleClearSelection = () => {
    // Reset selected rows to empty
    setSelectedRowKeys([]);

    // If you need to trigger your onSelectAll callback explicitly
    // Replace this with your actual onSelectAll function
    const customOnSelectAll = (isSelected, selectedRows) => {
      console.log('onSelectAll triggered manually:', isSelected, selectedRows);
      // Add your custom logic here (e.g., update parent state, call APIs)
    };

    // Call onSelectAll with false (deselected) and empty rows array
    customOnSelectAll(false, []);
  };

  return (
    <div>
      <Button 
        onClick={handleClearSelection} 
        type="default" 
        style={{ marginBottom: 16 }}
      >
        Anular selección
      </Button>
      <Table
        dataSource={tableData}
        columns={columns}
        rowSelection={{
          selectedRowKeys,
          onChange: handleSelectionChange,
          // Your original onSelectAll logic if you have it
          onSelectAll: (isSelected, selectedRows) => {
            console.log('Natural onSelectAll trigger:', isSelected, selectedRows);
          },
        }}
      />
    </div>
  );
};

export default SelectionTable;

Key Details: #

• State-Driven Selection: By controlling selectedRowKeys, clearing all selections is as simple as setting the state to an empty array—Ant Design's Table will automatically update to reflect this.
• Manual onSelectAll Trigger: If your onSelectAll has critical business logic (like updating a parent component or making an API call), you can call it directly in the button handler with false (since we're deselecting all) and an empty array for selected rows.
• Version Compatibility: This works for both Ant Design 4.x and 5.x, as the rowSelection props remain consistent across these versions.

内容的提问来源于stack exchange，提问作者Anthony Luzquiños