React+Ant Design页面加载时表格复选框默认选中问题求助

你的代码有两个核心问题导致默认选中不生效：

• 误用了defaultChecked：在受控模式下（配置了onChange），AntD Table的行选中状态由selectedRowKeys控制，getCheckboxProps里的defaultChecked不会生效。
• 属性名错误：RowSelection配置里的受控属性是selectedRowKeys，不是你写的selectedPages。

修正后的完整代码： #

状态定义

// 初始化时直接传入要默认选中的行key数组，比如选中Home和Login
const [selectedRowKeys, setSelectedRowKeys] = useState(['1', '2']);

行选择配置

const rowSelectionPages = {
  selectedRowKeys, // 修正属性名
  onChange: (newSelectedKeys) => {
    setSelectedRowKeys(newSelectedKeys);
  },
  selections: [Table.SELECTION_ALL, Table.SELECTION_NONE],
  getCheckboxProps: (record) => {
    return {
      disabled: record.screenName === 'Disabled',
      name: record.screenName,
      // 移除defaultChecked，受控模式下不需要
    };
  },
};

Table组件

<Table
  rowSelection={{
    type: "checkbox",
    ...rowSelectionPages,
  }}
  columns={columnsPages}
  dataSource={dataPages}
/>

关键说明 #

1. 受控模式逻辑：只要配置了onChange，Table就进入受控状态，所有选中状态都由selectedRowKeys决定，初始化时的数组就是默认选中的行key集合。
2. 禁用行处理：getCheckboxProps里的disabled依然生效，禁用行不会被选中（即使你把它的key放进初始数组里）。
3. 动态默认选中：如果默认选中的行需要从接口获取，可在useEffect里调用setSelectedRowKeys更新状态。

内容的提问来源于stack exchange，提问作者Kamohobe