在reactjs中显示菜单项后无法显示图标。

Posted 2021-04-08

我已经为图标创建了一个下拉菜单，当图标被点击时，它将显示下拉菜单。一旦我们把鼠标悬停在卡片上，就会出现三个小点的图标，但我的目标是即使在显示下拉菜单后，图标也应该出现。但我的目标是即使在显示下拉菜单后，图标也应该出现，但这里是我的代码，它正在消失。谁能帮我解决这个问题？

这里是代码。

    <Card>
        <CardHeader
          className={classes.header}
          avatar={<Avatar aria-label="recipe">R</Avatar>}
          action={
            <div>
              <IconButton
                id="simple-menu"
                className={classes.showIcon}
                aria-label="settings"
                aria-controls="simple-menu"
                onClick={this.handleClick}
              >
                <MoreVertIcon />
              </IconButton>
              <Menu
                style={{ marginTop: "35px" }}
                id="simple-menu"
                keepMounted
                anchorEl={this.state.menu}
                open={Boolean(this.state.menu)}
                onClose={this.handleClose}
              >
                <MenuItem onClick={this.handleClose}>Profile</MenuItem>
                <MenuItem onClick={this.handleClose}>change password</MenuItem>
                <MenuItem onClick={this.handleClose}>Logout</MenuItem>
              </Menu>
            </div>
          }
          title="Shrimp and Chorizo Paella"
          subheader="September 14, 2016"
        />
      </Card>

下面是示例代码

答案

创建一个样式className，将图标的可见性设置为。visible. 只有当菜单打开时，才有条件地将该类分配给父div，即检查是否有 this.state.menu && classes.menu.

风格

const styles = theme => ({
  header: {
    background: "grey",
    "&:hover": {
      background: "yellow",
      "& $showIcon": {
        visibility: "visible"
      }
    }
  },
  showIcon: {
    visibility: "hidden"
  },
  menu: {
    "& $showIcon": {
      visibility: "visible"
    }
  }
});

JSX

<Card>
        <CardHeader
          className={classes.header}
          avatar={<Avatar aria-label="recipe">R</Avatar>}
          action={
            <div className={this.state.menu && classes.menu}>
              <IconButton
                id="simple-menu"
                className={classes.showIcon}
                aria-label="settings"
                aria-controls="simple-menu"
                onClick={this.handleClick}
              >
                <MoreVertIcon />
              </IconButton>
  ...

您的代码的工作副本在这里