使用Material UI实现React Dropdown动态按钮的组件选型咨询

你要的这个是MUI里非常常见的拆分式下拉按钮场景，直接用官方自带的组合组件就能实现，不用自定义封装。

用到的组件 #

• ButtonGroup：用来拼接左侧主操作按钮和右侧下拉按钮，自动合并边框，不需要额外处理样式
• Button：分别做左侧主触发按钮、右侧下拉触发按钮
• Menu + MenuItem：实现下拉选项面板
• 可选：ArrowDropDownIcon 作为下拉按钮的箭头图标，从@mui/icons-material引入即可

核心逻辑 #

1. 用useState管理菜单的显示状态和锚点元素，控制菜单的弹出和收起
2. 点击右侧下拉按钮弹出菜单，点击选项或菜单外区域自动关闭
3. 如果需要按钮文本动态切换，把选中的选项值同步到主按钮上即可

可运行示例代码 #

import React, { useState } from 'react';
import Button from '@mui/material/Button';
import ButtonGroup from '@mui/material/ButtonGroup';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';

export default function SplitDropdown() {
  const [menuAnchor, setMenuAnchor] = useState(null);
  const [actionText, setActionText] = useState('提交');
  const menuOpen = Boolean(menuAnchor);

  // 打开下拉菜单
  const openMenu = (e) => setMenuAnchor(e.currentTarget);
  // 关闭下拉菜单
  const closeMenu = () => setMenuAnchor(null);
  // 选中下拉选项
  const selectAction = (text) => {
    setActionText(text);
    closeMenu();
    // 这里补充选中对应选项后的业务逻辑
  };
  // 点击左侧主按钮的逻辑
  const triggerMainAction = () => {
    console.log('执行当前选中的操作：', actionText);
  };

  return (
    <>
      <ButtonGroup variant="contained">
        <Button onClick={triggerMainAction}>{actionText}</Button>
        <Button onClick={openMenu}>
          <ArrowDropDownIcon />
        </Button>
      </ButtonGroup>
      <Menu
        anchorEl={menuAnchor}
        open={menuOpen}
        onClose={closeMenu}
        disablePortal
      >
        <MenuItem onClick={() => selectAction('提交')}>提交</MenuItem>
        <MenuItem onClick={() => selectAction('保存草稿')}>保存草稿</MenuItem>
        <MenuItem onClick={() => selectAction('预览')}>预览</MenuItem>
      </Menu>
    </>
  )
}

扩展说明 #

• 如果不需要主按钮文本动态变化，直接固定Button内的文本即可，不需要维护actionText状态
• 下拉菜单里可以加Divider组件做选项分组，给MenuItem加disabled属性实现禁用效果
• 按钮的样式可以通过sx属性自定义调整，比如背景色、圆角、尺寸，和你的设计稿对齐就行

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