Antd React Table设置动态expandableRowKeys后无法点击展开

你的问题出在两个核心点：一是受控状态的expandedRowKeys没有绑定状态更新回调，二是自定义的行点击事件干扰了Table默认的展开逻辑。以下是具体修复方案：

问题分析 #

1. 你将expandedRowKeys设为受控状态，但未配置对应的状态更新回调，点击展开/收起按钮时无法同步更新状态，导致UI无响应。
2. 自定义的onRow onClick事件会覆盖或干扰Table行内默认的展开按钮逻辑——展开按钮属于行的一部分，点击时会触发你的自定义逻辑，但未处理展开状态的切换。

修复步骤 #

1. 给expandable配置添加onExpandedRowsChange，用来同步更新expandedRowKeys状态，确保点击展开/收起时状态能实时更新。
2. 若需要保留行点击的自定义逻辑，不要直接用onRow的onClick，改用expandable的onExpand回调同时处理展开切换和行点击逻辑；或在onRow的点击事件里判断点击目标是否为展开图标，避免冲突。

修改后的Table代码示例 #

<Table
  dataSource={dataSource}
  columns={columns}
  expandable={{
    expandedRowKeys: expandedRowKeys,
    rowExpandable: (record) => record.children?.length > 0,
    // 绑定状态更新回调，同步展开行的key数组
    onExpandedRowsChange: (keys) => setExpandedRowKeys(keys),
    // 可选：点击行（含展开按钮）时同步触发展开切换和自定义行点击逻辑
    onExpand: (expanded, record) => {
      let newKeys = [...expandedRowKeys];
      if (expanded) {
        newKeys.push(record.key);
      } else {
        newKeys = newKeys.filter(key => key !== record.key);
      }
      setExpandedRowKeys(newKeys);
      handleRowClick(record);
    }
  }}
  rowClassName={(record) =>
    record.key === selectedRowKey ? "selected-row" : ""
  }
  // 若仅需点击行非展开区域触发自定义逻辑，可保留以下配置并做判断
  // onRow={(record) => {
  //   return {
  //     onClick: (e) => {
  //       // 排除点击展开图标的情况
  //       if (!e.target.closest('.ant-table-row-expand-icon')) {
  //         handleRowClick(record);
  //       }
  //     }
  //   };
  // }}
/>

额外说明 #

• 当使用受控的expandedRowKeys时，必须手动通过回调更新状态，Antd不会自动维护这个数组。
• 搜索时设置父级key到expandedRowKeys的逻辑可正常保留，onExpandedRowsChange会在手动点击时同步合并状态，确保两种场景不冲突。

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