React中如何添加多个onClick事件？Material UI侧边栏导航方案

方案一：整合点击事件逻辑 #

如果侧边栏里部分菜单项负责页面跳转、部分负责展开子菜单，可以给菜单配置标记类型，在统一的点击处理函数里分支执行逻辑：

1. 修改菜单配置，区分跳转项和子菜单项：

const menuItems = [
  {
    text: 'Home',
    icon: HomeIcon,
    type: 'route',
    to: '/'
  },
  {
    text: 'Log In',
    icon: MailIcon,
    type: 'route',
    to: '/login'
  },
  {
    text: 'Sign Up',
    icon: HomeIcon,
    type: 'route',
    to: '/signup'
  },
  {
    text: 'Sub Menu 1',
    icon: MenuIcon,
    type: 'submenu',
    handler: 'submenu1'
  },
  {
    text: 'Sub Menu 2',
    icon: MenuIcon,
    type: 'submenu',
    handler: 'submenu2'
  }
];

2. 编写统一的点击处理函数：

const handleMenuItemClick = (item) => {
  // 跳转逻辑
  if (item.type === 'route') {
    history.push(item.to);
    return;
  }
  // 子菜单展开/收起逻辑
  if (item.handler === 'submenu1') {
    handleSubMenu1Click();
  } else if (item.handler === 'submenu2') {
    handleSubMenu2Click();
  }
};

3. 渲染ListItem时绑定统一函数：

<List>
  {menuItems.map((item, index) => {
    const Icon = item.icon;
    return (
      <ListItem button key={index} onClick={() => handleMenuItemClick(item)}>
        <ListItemIcon>
          <Icon />
        </ListItemIcon>
        <ListItemText primary={item.text} />
        {/* 子菜单可添加展开/收起图标 */}
        {item.type === 'submenu' && <ExpandMoreIcon />}
      </ListItem>
    );
  })}
</List>

方案二：结合React Router的Link组件（推荐） #

Material UI的ListItem支持通过component属性指定底层渲染组件，纯跳转项直接用Link作为component，子菜单项保留默认button逻辑，更贴合React Router的原生跳转特性：

1. 菜单配置保留跳转路径，给子菜单项加标记：

const menuItems = [
  {
    text: 'Home',
    icon: HomeIcon,
    to: '/'
  },
  {
    text: 'Log In',
    icon: MailIcon,
    to: '/login'
  },
  {
    text: 'Sign Up',
    icon: HomeIcon,
    to: '/signup'
  },
  {
    text: 'Sub Menu 1',
    icon: MenuIcon,
    isSubmenu: true,
    handler: handleSubMenu1Click
  },
  {
    text: 'Sub Menu 2',
    icon: MenuIcon,
    isSubmenu: true,
    handler: handleSubMenu2Click
  }
];

2. 渲染时动态设置组件和事件：

import { Link } from 'react-router-dom';

<List>
  {menuItems.map((item, index) => {
    const Icon = item.icon;
    return (
      <ListItem
        button
        key={index}
        {/* 跳转项用Link作为底层组件 */}
        component={item.to ? Link : undefined}
        to={item.to}
        {/* 子菜单绑定对应展开函数 */}
        onClick={item.isSubmenu ? item.handler : undefined}
      >
        <ListItemIcon>
          <Icon />
        </ListItemIcon>
        <ListItemText primary={item.text} />
        {item.isSubmenu && <ExpandMoreIcon />}
      </ListItem>
    );
  })}
</List>

方案对比 #

• 方案一适合需要在跳转前执行额外逻辑（比如状态更新、权限校验）的场景，逻辑集中，便于统一维护。
• 方案二更符合React Router的设计理念，能利用Link的原生特性（如浏览器历史记录管理、路由预加载），代码更简洁。

内容的提问来源于stack exchange，提问作者R9102