制作一个不可点击的菜单项

Question

我正在Dropdown使用 Ant Design 制作菜单：

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>
        );
    }
}

这就是我得到的：

但我不想只删除突出显示，我还想让组件不可点击，即我想要一个“普通光标”而不是“手形光标”。

按照Ant Design 文档的selectable={false}建议在组件上添加prop没有帮助。我应该怎么办？Menu

感谢您的帮助。

Answer 1

您链接到的文档指定了一个可能会执行您想要的操作的disabled道具。Menu.Item如果您想做库提供之外的事情，您可以自定义行为。

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

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

文档

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

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