SPFX中Fluent UI分组DetailsList点击唤起上下文菜单如何实现？

前置准备 #

确保你的SPFX项目已安装对应版本的Fluent UI依赖，SPFX 1.15及以上版本适配@fluentui/react v8，不要使用v9版本避免组件不兼容。

步骤1：引入所需组件和定义状态 #

首先在你的webpart组件文件顶部引入必要组件，同时定义状态存储菜单相关参数：

import { ContextualMenu, IContextualMenuItem, DetailsRow, IDetailsListProps } from '@fluentui/react';
import { useState } from 'react';

// 组件内部状态定义，YourListItemType替换为你实际的列表项TS类型
const [contextMenuState, setContextMenuState] = useState<{
  menuItems: IContextualMenuItem[];
  targetElement: HTMLElement | null;
  currentItem: YourListItemType;
} | null>(null);

步骤2：定义菜单操作项与关闭逻辑 #

先定义菜单关闭方法，再根据业务需求定义你的操作菜单项：

// 关闭菜单通用方法
const dismissMenu = () => setContextMenuState(null);

// 生成对应列表项的操作菜单
const getContextMenuItems = (item: YourListItemType): IContextualMenuItem[] => [
  {
    key: 'viewDetail',
    text: '查看详情',
    onClick: () => {
      // 替换为你的查看逻辑
      console.log('查看选中项：', item);
      dismissMenu();
    }
  },
  {
    key: 'editItem',
    text: '编辑项',
    onClick: () => {
      // 替换为你的编辑逻辑
      console.log('编辑选中项：', item);
      dismissMenu();
    }
  },
  {
    key: 'deleteItem',
    text: '删除项',
    onClick: () => {
      // 替换为你的删除逻辑
      console.log('删除选中项：', item);
      dismissMenu();
    }
  }
];

步骤3：为DetailsList绑定菜单触发事件 #

你可以通过自定义行渲染的方式，同时绑定左右键触发逻辑：

// 自定义DetailsList行渲染逻辑，绑定事件
const customRenderRow: IDetailsListProps['onRenderRow'] = (rowProps) => {
  if (!rowProps) return null;
  
  return (
    <div
      // 右键触发菜单
      onContextMenu={(e) => {
        e.preventDefault(); // 阻止浏览器默认右键菜单
        setContextMenuState({
          targetElement: e.currentTarget,
          currentItem: rowProps.item,
          menuItems: getContextMenuItems(rowProps.item)
        });
      }}
      // 如需左键也触发菜单，开启下面的逻辑，否则保留原有左键逻辑即可
      // onClick={(e) => {
      //   setContextMenuState({
      //     targetElement: e.currentTarget,
      //     currentItem: rowProps.item,
      //     menuItems: getContextMenuItems(rowProps.item)
      //   });
      // }}
    >
      <DetailsRow {...rowProps} />
    </div>
  );
};

// 将自定义渲染方法传给你的DetailsList组件
<DetailsList
  // 你原有DetailsList的其他属性，比如items、columns、groups等
  onRenderRow={customRenderRow}
/>

步骤4：渲染上下文菜单组件 #

在组件的JSX模板末尾添加上下文菜单的渲染逻辑：

{contextMenuState && (
  <ContextualMenu
    items={contextMenuState.menuItems}
    target={contextMenuState.targetElement}
    onDismiss={dismissMenu}
    isBeakVisible={true} // 按需开启菜单指向目标的尖角
    gapSpace={2} // 菜单和目标元素的间距
  />
)}

注意事项 #

• 类型替换：代码中的YourListItemType请替换为你实际的列表项TypeScript类型，避免类型报错
• 权限适配：如果不同操作需要做权限控制，可以在getContextMenuItems方法中根据当前用户权限过滤返回的菜单项，实现菜单的权限可见性控制
• 冲突处理：如果原有左键点击有其他业务逻辑，不要开启左键触发菜单的代码，避免逻辑冲突

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