Skip to main content

onClick

Description

fires on clicking an item of DropDown 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) - @deprecated, use option instead. Will be removed in v3.0
    • option - (required) same as action
    • event - (optional) a native html event

Example

import { useState } from "react";

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

const clicked = (ev) => {
const action = ev.action;
setMessage(action ? `clicked on ${action.id}` : "closed");
};

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

Related article: Catching the change of a clicked option

Related sample: Drop-down menu