React项目Material UI AppBar内Dropdown菜单位置错位问题求助

你的Material UI Menu组件缺少锚点元素绑定配置，同时存在state初始化、结构写法的小问题，导致菜单无法关联到触发的菜单项，出现位置偏移。

• 给触发菜单的Link元素绑定点击事件，获取元素DOM节点作为菜单的定位锚点
• 给Menu组件添加anchorEl属性，值为上述获取的触发元素节点
• 补充anchorOrigin和transformOrigin属性，控制菜单对齐到触发项的正下方
• 初始化state中的菜单开关状态，补上缺失的render方法包裹渲染逻辑

class Tester extends Component {
  constructor(props){
    super(props)
    this.state = {
      placeholder: [],
      toggle: false, // 初始化菜单开关状态
      anchorEl: null // 存储触发菜单的锚点元素
    }
    this.openMenu = this.openMenu.bind(this)
    this.closeMenu = this.closeMenu.bind(this)
  }

  openMenu(e){
    this.setState({
      toggle: true,
      anchorEl: e.currentTarget // 点击时获取触发元素作为锚点
    })
  }

  closeMenu(){
    this.setState({
      toggle: false,
      anchorEl: null
    })
  }

  render() {
    const { toggle, anchorEl } = this.state
    return (
      <>
        <Link className={classes.tester} onClick={this.openMenu}>
          Tester
        </Link>
        <Menu
          id="simple-menu"
          open={toggle}
          anchorEl={anchorEl} // 绑定锚点元素实现定位
          // 锚点元素的对齐位置：锚点左下角
          anchorOrigin={{
            vertical: 'bottom',
            horizontal: 'left',
          }}
          // 菜单的对齐位置：菜单左上角和锚点左下角对齐，刚好在触发项正下方
          transformOrigin={{
            vertical: 'top',
            horizontal: 'left',
          }}
          onClose={this.closeMenu}
        >
          <MenuItem onClick={this.closeMenu}>Profile</MenuItem>
          <MenuItem onClick={this.closeMenu}>My account</MenuItem>
          <MenuItem onClick={this.closeMenu}>Logout</MenuItem>
        </Menu>
      </>
    )
  }
}

如果需要调整菜单和触发项的相对位置，修改anchorOrigin和transformOrigin的vertical/horizontal值即可，可选值为top/center/bottom和left/center/right。

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