Question

我有一个菜单组件，它会在表中弹出。当我将材料ui示例复制到表中的单元格中时，它工作正常。

材料ui示例使用钩子，我想将其更改为类组件并使用redux。

进行更改后，弹出菜单不再与您按下的按钮对齐。

anchorEl属性负责传递已调用按钮的位置。

我添加了这些属性，使我可以移动菜单弹出窗口，但它与您单击以打开菜单的按钮不符。

const options = ["View", "Edit", "Delete"];

const ITEM_HEIGHT = 48;

class ActionsOptionMenu extends Component {
  state = { anchorEl: null };
  render() {
    return (
      <div>
        <IconButton
          aria-label='more'
          aria-controls='long-menu'
          aria-haspopup='true'
        >
          <MoreVertIcon />
        </IconButton>
        <Menu
          getContentAnchorEl={null}
          anchorOrigin={{
            height: "54px",
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            padding: `0 ${padding} 0 ${padding}`,
            margin: "0 auto 7px auto"
          }}
          transformOrigin={{ vertical: "top", horizontal: "right" }}
          id='long-menu'
          anchorEl={anchorEl}
          keepMounted
          open={true}
          PaperProps={{
            style: {
              maxHeight: ITEM_HEIGHT * 4.5,
              width: 120
            }
          }}
        >
          {options.map(option => (
            <MenuItem key={option}>{option}</MenuItem>
          ))}
        </Menu>
      </div>
    );
  }
}

Answer 1

我用这种方法解决了这个问题。

 render() {
    const { open } = this.state;
    return (
      <div>
        <IconButton
          aria-label='more'
          aria-controls='long-menu'
          aria-haspopup='true'
          buttonRef={node => {
            this.anchorEl = node;
          }}
          onClick={event => this.handleClick(event)}
        >
          <MoreVertIcon />
        </IconButton>
        <Popper
          open={open}
          anchorEl={this.anchorEl}
          transition
          disablePortal
          style={{ zIndex: 100 }}
        >
          {({ TransitionProps, placement }) => (
            <Grow
              {...TransitionProps}
              id='menu-list-grow'
              style={{
                zIndex: 1001,
                transformOrigin:
                  placement === "bottom" ? "center top" : "center bottom"
              }}
            >
              <Paper>
                <ClickAwayListener
                  onClickAway={event => this.handleClose(event)}
                >
                  <MenuList>
                    <MenuItem onClick={event => this.handleClose(event)}>
                      Profile
                    </MenuItem>
                    <MenuItem onClick={event => this.handleClose(event)}>
                      My account
                    </MenuItem>
                    <MenuItem onClick={event => this.handleClose(event)}>
                      Logout
                    </MenuItem>
                  </MenuList>
                </ClickAwayListener>
              </Paper>
            </Grow>
          )}
        </Popper>
      </div>
    );
  }

不带钩的材料ui锚

1 个答案: