如何获取Fluent UI拆分按钮菜单点击项的Key

直接通过onItemClick事件的第二个参数即可获取点击的菜单项对象，进而拿到对应的key属性，以下是修正后的实现：

// TypeScript场景需导入对应类型
import { IContextualMenuItem, IContextualMenuProps } from '@fluentui/react';

const menuProps: IContextualMenuProps = {
  items: [
    {
      key: 'emailMessage',
      text: 'Email message',
      iconProps: { iconName: 'Mail' },        
    },
    {
      key: 'calendarEvent',
      text: 'Calendar event',
      iconProps: { iconName: 'Calendar' },      
    },
  ],
  onItemClick: onItemClick,      
};

// 事件处理函数接收事件对象和点击的菜单项两个参数
function onItemClick(event: React.MouseEvent<HTMLElement>, item: IContextualMenuItem) {
  // 获取点击项的Key
  const clickedKey = item.key;
  console.log('点击的菜单项Key:', clickedKey);

  // 根据不同Key执行对应业务逻辑
  switch(clickedKey) {
    case 'emailMessage':
      // 处理邮件消息相关逻辑
      break;
    case 'calendarEvent':
      // 处理日历事件相关逻辑
      break;
    default:
      break;
  }
}

补充说明 #

• IContextualMenuItem类型包含菜单项的所有配置字段，除key外，还可直接获取text、iconProps等内容
• JavaScript开发场景可省略类型声明，直接使用function onItemClick(event, item)即可

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