如何在Joy UI中用IconButton、Chip实现MenuButton的菜单功能？

核心思路 #

Joy UI的菜单触发逻辑可以通过useMenuButton自定义钩子抽离出来，不用局限于官方提供的MenuButton组件。这个钩子会返回菜单触发所需的所有props（比如点击事件、无障碍属性等），把这些props直接传给IconButton或Chip，就能让它们拥有和MenuButton完全一致的菜单触发行为。

实现代码示例 #

1. 用IconButton作为菜单触发按钮 #

import { useState } from 'react';
import { useMenuButton, Menu, MenuItem } from '@mui/joy';
import IconButton from '@mui/joy/IconButton';
import MoreVertIcon from '@mui/icons-material/MoreVert';

export default function IconMenuTrigger() {
  const [open, setOpen] = useState(false);
  const buttonProps = useMenuButton({ open, setOpen });

  return (
    <>
      <IconButton {...buttonProps} size="sm">
        <MoreVertIcon />
      </IconButton>
      <Menu open={open} onClose={() => setOpen(false)}>
        <MenuItem onClick={() => setOpen(false)}>编辑</MenuItem>
        <MenuItem onClick={() => setOpen(false)}>删除</MenuItem>
        <MenuItem onClick={() => setOpen(false)}>分享</MenuItem>
      </Menu>
    </>
  );
}

2. 用Chip作为菜单触发按钮 #

import { useState } from 'react';
import { useMenuButton, Menu, MenuItem } from '@mui/joy';
import Chip from '@mui/joy/Chip';

export default function ChipMenuTrigger() {
  const [open, setOpen] = useState(false);
  const buttonProps = useMenuButton({ open, setOpen });

  return (
    <>
      <Chip {...buttonProps} label="更多操作" variant="outlined" />
      <Menu open={open} onClose={() => setOpen(false)}>
        <MenuItem onClick={() => setOpen(false)}>导出数据</MenuItem>
        <MenuItem onClick={() => setOpen(false)}>刷新页面</MenuItem>
        <MenuItem onClick={() => setOpen(false)}>设置</MenuItem>
      </Menu>
    </>
  );
}

为什么component属性没用？ #

MenuButton是Joy UI封装好的组件，它的菜单触发逻辑是内部绑定的，component属性仅用于替换它的根DOM元素，没法把整个组件的触发行为转移到IconButton或Chip上。而useMenuButton钩子是把触发逻辑完全抽离成可复用的props，能适配任何支持点击事件的组件。

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