How to disable click event for SubMenu in Ant Design?

在Ant Design中，如果您希望禁用子菜单的点击事件，主要有两种方法可以实现这一点。以下是具体的操作步骤和代码示例：

方法一：使用onItemClick事件进行控制

您可以在Menu组件的onClick事件中添加逻辑来判断并阻止特定子菜单项的点击事件。这里的关键是使用event对象的stopPropagation方法来阻止事件进一步传播。

示例代码：

jsx
import React from 'react';
import { Menu } from 'antd';

const { SubMenu } = Menu;

class App extends React.Component {
  handleClick = (e) => {
    if (e.key === 'subItem1') {
      e.domEvent.stopPropagation();  // 阻止点击事件向上传播
      console.log('子菜单项点击事件已禁用');
      return; // 在这里直接返回，不执行后续操作
    }

    // 其他菜单项的处理逻辑
    console.log('点击了菜单项:', e.key);
  };

  render() {
    return (
      <Menu onClick={this.handleClick}>
        <SubMenu key="sub1" title="主菜单1">
          <Menu.Item key="subItem1">不可点击的子菜单项</Menu.Item>
          <Menu.Item key="subItem2">子菜单项2</Menu.Item>
        </SubMenu>
        <Menu.Item key="mainItem1">主菜单项1</Menu.Item>
      </Menu>
    );
  }
}

export default App;

方法二：通过CSS样式修改

另一种方法是通过CSS样式来禁用子菜单的点击事件。您可以给特定的菜单项添加一个类名，然后在CSS中设置该类的pointer-events属性为none。这样，该菜单项的所有鼠标事件将被忽略。

示例代码：

jsx
import React from 'react';
import { Menu } from 'antd';
import './App.css'; // 引入CSS文件

const { SubMenu } = Menu;

class App extends React.Component {
  render() {
    return (
      <Menu>
        <SubMenu key="sub1" title="主菜单1">
          <Menu.Item key="subItem1" className="disabled-item">不可点击的子菜单项</Menu.Item>
          <Menu.Item key="subItem2">子菜单项2</Menu.Item>
        </SubMenu>
        <Menu.Item key="mainItem1">主菜单项1</Menu.Item>
      </Menu>
    );
  }
}

export default App;

css
/* App.css */
.disabled-item {
  pointer-events: none; /* 禁用鼠标事件 */
  color: gray; /* 可选，改变颜色显示为禁用状态 */
}

通过以上两种方法，您可以有效地禁用Ant Design中的子菜单点击事件。选择哪种方式取决于您的具体需求和偏好。