如何在菜單頂部添加標題和關閉按鈕（在 material-ui 中單擊時，在按鈕菜單中的第一項上方？

Question

我有一個包含菜單項復選框列表的圖標按鈕菜單。 當用戶單擊圖標並打開下拉菜單時，我想在菜單中添加一個標題，在下拉菜單的頂部有一個關閉按鈕。

我目前所做的是使用第一個菜單項並將其禁用，覆蓋樣式並顯示標題。 我真的很討厭這樣，因為這不是應該的方式。 現在我想在 tite 的右側添加一個關閉按鈕，但是由於 menuitem 被禁用，我不能這樣做。

這是我的代碼：

    <DropdownButtonMenu
        id="customized-menu"
        anchorEl={anchorEl}
        keepMounted
        PaperProps={{
            style: {
                maxHeight: 225,
            },
        }}
        open={Boolean(anchorEl)}
        onClose={handleClose}
    >
        <TitleMenuItem disabled={true} className='classes.title'>
            <Typography variant="subtitle1" >
                {menuTitle}
            </Typography>
            //**NEED TO ADD A CLOSE BUTTON HERE AND NOT BE DISABLED
        </TitleMenuItem>
        {formColumns.map(colobj => (
            <CheckboxMenuItem
                key={`ckb-${colobj.name}`}
                className={classes.SearchMenuItem}
                selected={false}
                onClick={handleClose} >
                <Checkbox
                    checked={GetChecked(colobj)}
                    onChange={handleCheckboxClick} //Need to add 1,2 or 3 as parameter to this onChange event
                    className={classes.searchColumnCheckbox}
                    value={`${colobj.name}`} />
                    {colobj.label}
            </CheckboxMenuItem>
        ))}
    </DropdownButtonMenu>

我通過子類化 MenuItem 創建了一個 TitleMenuItem，如下所示：

const TitleMenuItem = styled(MuiMenuItem)({
    disabled: props => props.opacity ? '1.0' : '1.0',
    color: props => props.color ? '#0047ab' : '#0047ab',
    margin: '0px',
    padding: '0px',
    paddingLeft: '8px',
});

並且對 DropDownButtonMenu 和 CheckboxMenuItem 做了類似的操作：

const DropdownButtonMenu = withStyles({
    paper: {
        border: "1px solid #d3d4d5",
        muiListPadding: {
            marginTop: '0px',
            paddingTop: '0px',

    }
    },
})(props => (
    <Menu
        elevation={0}
        getContentAnchorEl={null}
        anchorOrigin={{
            vertical: "bottom",
            horizontal: "center"
        }}
        transformOrigin={{
            vertical: "top",
            horizontal: "center"
        }}
        {...props}
    />
));

const CheckboxMenuItem = withStyles(theme => ({
    root: {
        "&:focus": {
            backgroundColor: theme.palette.primary.main,
            color: theme.palette.common.white,
            "& .MuiListItemIcon-root, & .MuiListItemText-primary": {
                color: theme.palette.common.white
            }
        },
        paddingTop: "2px",
        paddingBottom: "2px",
        paddingRight: "0px",
        paddingLeft: "4px",
        margin: "2px",
        fontSize: "0.8rem",
        lineHeight: "1",
    }
}))(MenuItem);

我會完全錯了嗎？ 我想要的只是帶有關閉按鈕的下拉菜單列表上的標題。 任何幫助將不勝感激！

Answer 1

為了保持有效的結構，您希望您的標題/按鈕元素呈現一個<li>元素（因為Menu在<ul>元素中呈現它）。 MenuItem 呈現一個<li> ，但它也做了一些你不想要的事情——主要是它使用ListItem的button屬性將整個<li>呈現為一個按鈕。

為避免將整個<li>視為按鈕，我將使用ListItem作為您的起點（它為樣式設置提供了一個合理的起點）。

我的另一個建議是有點小技巧，它取決於將來可能會改變的實現細節。 當Menu打開時，它將嘗試將焦點放在第一個未禁用的菜單項上（有修改此功能的方法，但在大多數情況下這是可取的）。 它通過在Menu的直接子項上查找disabled屬性來確定菜單項是否被禁用。 所以我的建議是給你的標題元素disabled道具，但讓你的自定義ListItem忽略該道具。

這看起來像這樣：

const IgnoreDisabledListItem = React.forwardRef(function IgnoreDisabledListItem(
  { disabled, ...other },
  ref
) {
  return <ListItem {...other} ref={ref} />;
});

然后像下面這樣使用它：

        <IgnoreDisabledListItem disabled>
          My Title{" "}
          <IconButton onClick={handleClose}>
            <CloseIcon />
          </IconButton>
        </IgnoreDisabledListItem>

在 JSX 中指定disabled屬性會阻止Menu將焦點放在該項目上，但IgnoreDisabledListItem阻止該disabled屬性產生任何其他效果。

這是一個完整的工作示例：

import React from "react";
import Button from "@material-ui/core/Button";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";
import ListItem from "@material-ui/core/ListItem";
import CloseIcon from "@material-ui/icons/Close";
import IconButton from "@material-ui/core/IconButton";

const IgnoreDisabledListItem = React.forwardRef(function IgnoreDisabledListItem(
  { disabled, ...other },
  ref
) {
  return <ListItem {...other} ref={ref} />;
});
export default function SimpleMenu() {
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleClick = event => {
    setAnchorEl(event.currentTarget);
  };

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

  return (
    <div>
      <Button
        aria-controls="simple-menu"
        aria-haspopup="true"
        onClick={handleClick}
      >
        Open Menu
      </Button>
      <Menu
        id="simple-menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        <IgnoreDisabledListItem disabled>
          My Title{" "}
          <IconButton onClick={handleClose}>
            <CloseIcon />
          </IconButton>
        </IgnoreDisabledListItem>
        <MenuItem onClick={handleClose}>Profile</MenuItem>
        <MenuItem onClick={handleClose}>My account</MenuItem>
        <MenuItem onClick={handleClose}>Logout</MenuItem>
      </Menu>
    </div>
  );
}