如何阻止Material UI MenuItem点击时关闭菜单及自定义关闭按钮

一、阻止MenuItem点击时自动关闭菜单 #

Material UI的Menu组件默认会在点击MenuItem时触发onClose回调，要阻止这个行为，只需在MenuItem的onClick事件中调用event.stopPropagation()，同时移除MenuItem上直接绑定的关闭逻辑：

• 移除MenuItem的onClick={handleClose}
• 给MenuItem添加onClick={(e) => e.stopPropagation()}，阻止事件冒泡到Menu组件，避免触发默认关闭逻辑

二、为按钮添加关闭菜单的功能 #

直接在保存按钮的onClick事件中调用已有的handleClose函数即可，可先完成数据保存逻辑，再执行关闭操作。

修改后的代码片段 #

function AppWindow() {
  const [settingsState, setSettingsState] = useState(false);
  const [anchorEl, setAnchorEl] = useState(null);
  const open = Boolean(anchorEl);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
    event.currentTarget.stopPropagation();
    
    setSettingsState(prev => !prev); // 简化状态切换逻辑
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  // 数据保存逻辑
  const handleSave = () => {
    // 这里编写你的数据保存代码，比如获取输入框值、提交接口等
    console.log('数据保存完成');
    // 保存后关闭菜单
    handleClose();
  };

  return (
    <Box className="App">
      <Box className='AppContainer'>
        <Paper className='Application' elevation={24} sx={{backgroundColor: '#023453'}}>
          <Box sx={{margin: '1%'}}>
            <Grid container>
              <Grid item xs={11} sx={{color: '#d4e1ed'}}>
                Name
              </Grid>
              <Grid item xs={1}>
                <SettingsIcon onClick={handleClick}></SettingsIcon>
                <Menu
                  id="basic-menu"
                  anchorEl={anchorEl}
                  open={open}
                  onClose={handleClose}
                  getContentAnchorEl={null}
                  anchorOrigin={{vertical: 'bottom', horizontal: ''}}
                  transformOrigin={{vertical: 'top', horizontal: 'right'}}
                  sx={{marginTop: '0.5%'}}
                >
                  {/* 修改MenuItem点击事件，阻止冒泡 */}
                  <MenuItem onClick={(e) => e.stopPropagation()}>
                    {/* 文本输入框 */}
                    <TextField label="输入数据" variant="outlined" size="small" />
                    {/* 保存按钮：先保存再关闭 */}
                    <Button onClick={handleSave} variant="contained" sx={{ml: 1}}>保存</Button>
                    {/* 可选：单独的关闭按钮 */}
                    <Button onClick={handleClose} variant="outlined" sx={{ml: 1}}>关闭</Button>
                  </MenuItem>
                </Menu>
              </Grid>
            </Grid>
          </Box>
        </Paper>
      </Box>
    </Box>
  );
}

补充说明 #

• 点击MenuItem内部的输入框或其他元素时，事件不会冒泡到Menu组件，菜单不会自动关闭
• 点击保存按钮会先执行保存逻辑，再关闭菜单；点击单独的关闭按钮则直接关闭菜单
• 原触发菜单的SettingsIcon点击时，会通过更新anchorEl状态自动关闭已打开的菜单

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