React+Ant Design选中按钮菜单内容修改方法咨询

问题描述 #

我正在使用 React 搭配 Ant Design（antd）开发项目，需要修改选中按钮关联的菜单内容，更新点击按钮时展示的选项，希望获取在 Ant Design 框架内修改选中按钮对应菜单内容的具体指导。

现有代码 #

import BreadcumbCustom from 'views/share/BreadcumbCustom.jsx'
import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { AppstoreOutlined, MailOutlined } from '@ant-design/icons'
import { Menu } from 'antd'

const items = [
  {
    label: 'Tracciati',
    key: '1-1',
    icon: <MailOutlined />,
  },
  {
    label: 'Classificazioni',
    key: '1-2',
    icon: <AppstoreOutlined />,
  },
]
export default function MenuConfigurazioni() {
  const navigate = useNavigate()
  const [current, setCurrent] = useState()
  const handleDropdownItemClick = (e) => {
    setCurrent(e.key)
    if (e.key === '1-1') {
      navigate('/admin/configurazione')
    } else {
      navigate('/admin/configurazione/classificazioni')
    }
  }

  return (
    <div>
      <BreadcumbCustom title={'Configurazione'} />
      <Menu
        onClick={handleDropdownItemClick}
        selectedKeys={[current]}
        mode='horizontal'
        items={items}
      />
    </div>
  )
}

修改流程与方案 #

1. 动态修改菜单展示选项 #

如果需要根据状态或业务条件切换菜单的展示内容，可将菜单选项改为状态变量，通过 setState 动态更新：

• 初始化状态存储菜单选项：

  const [menuItems, setMenuItems] = useState([
    {
      label: 'Tracciati',
      key: '1-1',
      icon: <MailOutlined />,
    },
    {
      label: 'Classificazioni',
      key: '1-2',
      icon: <AppstoreOutlined />,
    },
  ])
  

• 添加修改菜单的触发逻辑（比如按钮点击）：

  const updateMenu = () => {
    setMenuItems([
      {
        label: 'Nova Configurazione',
        key: '3-1',
        icon: <EditOutlined />,
      },
      {
        label: 'Classificazioni',
        key: '1-2',
        icon: <AppstoreOutlined />,
      },
    ])
    // 可选：重置选中状态到新菜单的第一个选项
    setCurrent('3-1')
  }
  

• 在 Menu 组件中使用状态变量：

  <Menu
    onClick={handleDropdownItemClick}
    selectedKeys={[current]}
    mode='horizontal'
    items={menuItems}
  />
  

2. 修改菜单项点击后的行为 #

如果需要调整点击菜单项后的导航或业务逻辑，直接修改 handleDropdownItemClick 函数即可：

const handleDropdownItemClick = (e) => {
  setCurrent(e.key)
  // 用switch替代if-else，更易扩展
  switch(e.key) {
    case '1-1':
      navigate('/admin/configurazione')
      break
    case '1-2':
      navigate('/admin/configurazione/classificazioni')
      break
    case '3-1':
      navigate('/admin/nova-configurazione')
      break
    default:
      break
  }
}

3. 保持选中状态与路由同步 #

如果希望路由变化时自动更新菜单选中状态，可结合 useLocation 监听路由：

import { useLocation } from 'react-router-dom'

// ...

const location = useLocation()

useEffect(() => {
  // 建立路由路径与菜单key的映射
  const pathToKeyMap = {
    '/admin/configurazione': '1-1',
    '/admin/configurazione/classificazioni': '1-2',
    '/admin/nova-configurazione': '3-1'
  }
  setCurrent(pathToKeyMap[location.pathname] || '')
}, [location.pathname])

完整示例代码 #

import BreadcumbCustom from 'views/share/BreadcumbCustom.jsx'
import React, { useState, useEffect } from 'react'
import { useNavigate, useLocation } from 'react-router-dom'
import { AppstoreOutlined, MailOutlined, EditOutlined } from '@ant-design/icons'
import { Menu, Button } from 'antd'

export default function MenuConfigurazioni() {
  const navigate = useNavigate()
  const location = useLocation()
  const [current, setCurrent] = useState('')
  const [menuItems, setMenuItems] = useState([
    {
      label: 'Tracciati',
      key: '1-1',
      icon: <MailOutlined />,
    },
    {
      label: 'Classificazioni',
      key: '1-2',
      icon: <AppstoreOutlined />,
    },
  ])

  // 路由变化同步选中状态
  useEffect(() => {
    const pathMap = {
      '/admin/configurazione': '1-1',
      '/admin/configurazione/classificazioni': '1-2',
      '/admin/nova-configurazione': '3-1'
    }
    setCurrent(pathMap[location.pathname] || '')
  }, [location.pathname])

  const handleDropdownItemClick = (e) => {
    setCurrent(e.key)
    switch(e.key) {
      case '1-1':
        navigate('/admin/configurazione')
        break
      case '1-2':
        navigate('/admin/configurazione/classificazioni')
        break
      case '3-1':
        navigate('/admin/nova-configurazione')
        break
      default:
        break
    }
  }

  const switchMenu = () => {
    setMenuItems([
      {
        label: 'Nova Configurazione',
        key: '3-1',
        icon: <EditOutlined />,
      },
      {
        label: 'Classificazioni',
        key: '1-2',
        icon: <AppstoreOutlined />,
      },
    ])
    setCurrent('3-1')
  }

  return (
    <div>
      <BreadcumbCustom title={'Configurazione'} />
      <Button onClick={switchMenu} style={{ marginBottom: 16 }}>切换菜单选项</Button>
      <Menu
        onClick={handleDropdownItemClick}
        selectedKeys={[current]}
        mode='horizontal'
        items={menuItems}
      />
    </div>
  )
}

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