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

【问题标题】：Make an unclickable Menu Item制作一个不可点击的菜单项
【发布时间】：2021-04-04 19:50:56
【问题描述】：

我正在使用 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 的建议在Menu 组件上添加selectable={false} 属性无济于事。我该怎么办？

感谢您的帮助。

【问题讨论】：

标签： css reactjs drop-down-menu antd

【解决方案1】：

documentation you linked 在Menu.Item 上指定一个disabled 属性，它可能会或可能会做你想做的事。如果你想做一些库提供之外的事情，你可以自定义行为。

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

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

Docs

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

【讨论】：

至于禁用突出显示？
再次，只需覆盖 CSS。它可能是一种背景颜色，您可以使用网络检查器检查它所在的元素。
好的，谢谢，我想知道是否有直接使用 Ant Design 的解决方案，就像我不知道的道具一样，但显然没有。
@JacopoStanchi 我不熟悉它；我更新了答案以包含您链接的文档中的内容，但我不知道它是否符合您的要求。

【解决方案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

【讨论】：