I'm using the ant-design Dropdown component with a right click action inside.
I want to be able to increment by 5 or 10 at once. But whenever this is being clicked it will ignore the one by the onClick listener for the Menu.Item.
const App = () => {
const [counter, setCounter] = useState(1);
const menu = (
<Menu>
<Menu.Item key="five" onClick={() => setCounter(counter + 5)}>
by 5
</Menu.Item>
<Menu.Item key="ten" onClick={() => setCounter(counter + 10)}>
by 10
</Menu.Item>
</Menu>
);
return (
<div>
<p>Counter: {counter}</p>
<div onClick={() => setCounter(counter + 1)} style={STYLING}>
<p>Click here to increment</p>
<Dropdown overlay={menu} trigger={["contextMenu"]}>
<span>
Right click here for custom increment
</span>
</Dropdown>
</div>
</div>
);
};
Codesandbox example: https://codesandbox.io/s/contextmenu-with-dropdown-antd-n4c5i?file=/index.js
I have tried to play around with ReactDOM.createPortal, but I just can't figure out how to use it correctly in a scenario like this one.
I know I should probably not go into a createPortal solution, but the reason I need this is not for this simple example, but I want to have this functionality inside the ant-design table column header while also having sorting support.
I figured I don't need to use portals. Instead I can use stopPropagation to prevent any parent node to get a onClick event.
Within the Menu.Item onClick event the standard javascript event is available under a domEvent field.
So we can create a function like this:
const menuOnClick = (amount) => (e) => {
e.domEvent.stopPropagation();
setCounter(counter + amount);
};
and update our Menu.Item onClick callbacks to this
<Menu.Item key="five" onClick={menuOnClick(5)}>
Sandbox example: https://codesandbox.io/s/contextmenu-with-dropdown-antd-solution-8029o?file=/index.js