如何在React.js中用MUI实现按钮式下拉选择、选中值同步到按钮的功能？

问题修复方案 #

你现有代码的问题集中在3处：

• MenuItem 是MUI的点击交互组件，没有内置onChange事件，你绑定的该事件不会触发
• 你定义的city字段是数组类型，直接渲染会出现不符合预期的格式，需要取数组内的文本值
• 原来的setValue逻辑无法正确获取选中的城市内容

修正后的完整组件代码

import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import PopupState, { bindTrigger, bindMenu } from 'material-ui-popup-state';
import { Button } from '@mui/material';
import React from 'react';

const MenuPopupState = (props) => {
  const [value, setValue] = React.useState(props.name)
  // 新增选中处理逻辑，接收选中的城市值
  const handleSelect = (city) => {
    setValue(city);
    // 如果需要把选中值传递给父组件，这里可以加 props.onChange(city) 调用父组件传的回调
  };

  return (
    <PopupState variant="popover" popupId="demo-popup-menu">
      {(popupState) => (
        <React.Fragment>
          <Button sx={{m: 0.5}} endIcon={<KeyboardArrowDownIcon />} variant="contained" {...bindTrigger(popupState)}>
            {value}
          </Button>
          <Menu {...bindMenu(popupState)}>
            {props.childs.map((item, index) =>
              <MenuItem 
                key={index} 
                onClick={() => {
                  // 点击时先更新选中值，再关闭弹窗
                  handleSelect(item.city[0])
                  popupState.close()
                }}
              >
                {item.city[0]}
              </MenuItem>
            )}
          </Menu>
        </React.Fragment>
      )}
    </PopupState>
  );
}

export default MenuPopupState

可选优化

如果你不需要city字段为数组，可以把数据定义里的city: ['city 1']改为city: 'city 1'，对应组件里所有的item.city[0]替换为item.city即可。

你原有数据定义和组件调用的代码不需要改动，替换组件逻辑就可以实现「选中选项后按钮文本同步更新」的需求。

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