Skip to main content

onClick

Description​

Fires on clicking an item of Context Menu or outside the menu

Usage​

onClick?: (ev: {
  context?: any;
  action: IMenuOption;  // @deprecated use `option` instead. Will be removed in v3.0 
  option: IMenuOption;    
  event?: MouseEvent;    
}) => void;

Parameters​

  • ev - an event object with the next parameters:
    • context - (optional) an object for which menu was called
    • action - (required) the object of selected (clicked) menu item, empty if menu was closed by an outside click (for the MenuOption parameters description refer to options)
    • option - (required) same as action
    • event - (optional) a native HTML event

Example​

import { useState } from "react";

export default function Example({ options }: { options: any }) {
  const [message, setMessage] = useState("");

  function clicked(ev: {
    action?: { id?: string };
    option?: { id?: string };
    context?: any;
    event?: MouseEvent;
  }) {
    const action = ev.action ?? ev.option;
    setMessage(action ? `clicked on ${action.id}` : "closed");
  }

  return (
    <ContextMenu options={options} onClick={clicked}>
      <Button type="primary">Right-Click me</Button>
      <div>{message}</div>
    </ContextMenu>
  );
}

Related article: Catching the change of a clicked option

Related sample: Context Menu