如何在material-table中点击其他行时先关闭已展开详情面板再打开目标行面板

实现思路 #

通过单一状态变量管控全局唯一的展开行ID，每次触发新行展开操作时，优先清空当前展开状态，再将新点击行ID赋值给状态变量，确保旧面板先关闭、新面板后打开的执行顺序。

具体实现步骤 #

• 第一步：定义状态存储当前展开的行ID，初始值为null表示无展开行

  const [expandedRowId, setExpandedRowId] = useState(null);
  

• 第二步：绑定行展开状态变更回调onRowExpandChange，处理展开/关闭逻辑

  const handleRowExpand = (currentRow, isToExpand) => {
    if (isToExpand) {
      // 触发新行展开：先清空原有展开状态
      setExpandedRowId(null);
      // 短延时确保旧面板完成关闭后再打开新面板，延时可根据实际渲染效率调整
      setTimeout(() => {
        setExpandedRowId(currentRow.id);
      }, 50);
    } else {
      // 触发当前行关闭：直接清空状态即可
      setExpandedRowId(null);
    }
  };
  

• 第三步：给material-table配置属性，关联状态与回调

  <MaterialTable
    // 你的其他配置：columns、data等
    detailPanel={rowData => {
      // 此处返回你嵌套的子表格内容
      return <div>行{rowData.id}的详情内容</div>
    }}
    onRowExpandChange={handleRowExpand}
    options={{
      // 配合单展开模式配置，避免原生多展开逻辑冲突
      detailPanelType: 'single'
    }}
  />
  

注意事项 #

• 需保证每行数据存在唯一标识（如上述示例的id字段），作为展开状态的匹配依据
• 若不需要严格的先关后开的时序感知，可去掉setTimeout直接赋值，React批量状态更新也会优先执行关闭逻辑
• 若你的行数据唯一标识字段不是id，对应替换currentRow.id为你自己的唯一字段即可

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