添加新行时自动展开Antd Table行（ReactJS）

要实现点击「添加行」按钮时向Antd Table插入新行并自动展开其面板，核心是利用Antd Table的expandedRowKeys属性控制展开状态，具体实现如下：

1. 维护展开行状态 #

在组件中新增状态存储当前展开行的key集合：

const [expandedRowKeys, setExpandedRowKeys] = useState([]);

2. 修改添加行逻辑 #

在添加新行的函数中，除了更新表格数据，还要将新行的唯一key加入到expandedRowKeys中：

const addRow = () => {
  // 生成唯一key，示例用时间戳保证唯一性
  const newRowKey = Date.now();
  const newRow = {
    key: newRowKey,
    name: "",
    age: "",
    children: [] // 展开面板所需的子数据，按需定义
  };
  // 更新表格数据源
  setDataSource([...dataSource, newRow]);
  // 追加新行key到展开集合，实现自动展开
  setExpandedRowKeys([...expandedRowKeys, newRowKey]);
};

3. 绑定Table的展开控制属性 #

给Table组件配置expandedRowKeys和onExpand属性，实现受控的展开/折叠逻辑：

<Table
  dataSource={dataSource}
  columns={columns}
  expandedRowKeys={expandedRowKeys}
  onExpand={(expanded, record) => {
    let updatedKeys = [...expandedRowKeys];
    if (expanded) {
      updatedKeys.push(record.key);
    } else {
      updatedKeys = updatedKeys.filter(key => key !== record.key);
    }
    setExpandedRowKeys(updatedKeys);
  }}
  expandedRowRender={(record) => (
    // 自定义展开面板内容，比如子表单或详情信息
    <div>
      <p>展开内容：{record.name}的详情</p>
    </div>
  )}
/>

关键注意点 #

• 新行的key必须唯一，否则会导致展开状态混乱；
• expandedRowKeys是受控属性，必须通过状态维护才能实现自动展开；
• 若需要保留原有行的展开状态，添加新行时需追加而非覆盖expandedRowKeys数组。

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