javascriptfluent-uifluentui-reactmicrosoft-documentation

Get the key of the clicked fluent ui button menu


Once again I have the confirmation the Microsoft documentation, is really poorly auto-generated with a useless content.

I have a Fluent UI, Splitbutton. Here are the poorly generated docs. And there are two options "Email message" and "Calendar event"... is not clear at all how to get the click on these items and understand what item was clicked... I tried the following codepen

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){
  console.log(event.currentTarget);
}

First of all the onClick in example is on the button itself, not on the menu items without any suggestion how to get them. Finally, after some researches, I found in another doc that it needs probably to have a onItemClick in the Props... undocumented, but then, also what is the type of this event and how to get the item key?


Solution

  • Completely by chance found an example on a non-ms related site, cause that is completely missing from the docs:

    function onItemClick(event, item){
      console.log(item.key);
    }