制作无法点击的菜单项

Question

我正在使用Ant Design做一个Dropdown菜单：

import React, { Component } from "react";
import { Icon, Dropdown, Menu } from "antd";
const { Item } = Menu;

class NotificationBell extends Component {
    render() {
        const menu = (
            <Menu>
                <Item><p>You must be connected to get notifications.</p></Item>
            </Menu>
        );
        return (
            <Dropdown overlay={menu} trigger={['click']}>
                <Icon type="bell" theme="outlined" />
            </Dropdown>
        );
    }
}

这是我得到的：

但是我不想只删除突出显示部分，我还希望使该组件不可单击，即，我希望使用“普通光标”代替“手形光标”。

按照the Ant Design documentation的建议在selectable={false}组件上添加Menu道具没有帮助。我该怎么办？

谢谢您的帮助。

Answer 1

在disabled上指定Menu.Item道具的documentation you linked可以或可以做您想要的。如果要执行库提供的功能以外的其他操作，则可以自定义行为。

您可以使用CSS属性cursor来指定您要悬停的光标。

您可能想将not-allowed用于禁用样式的光标，或者使用默认箭头：default。

Docs

为将来参考，您不能阻止用户单击该元素。您要做的实际上是使用视觉提示传达可负担性（或缺乏能力），并可能在收到输入时改变应用程序的行为。

Answer 2

CSS 属性 pointer-events 设置为 none 使组件忽略鼠标事件而不改变光标的样式。

<Menu>
  <Menu.Item key="/">
    <Link href="/">Clickable</Link>
  </Menu.Item>
  <Menu.Item style={{ pointerEvents: 'none' }}>
    Unclickable
  </Menu.Item>
</Menu>here