由于我更改为组件类并删除了挂钩，因此下拉菜单未打开答案

【问题标题】：Dropdown not opening since I changed to component class and removed hooks由于我更改为组件类并删除了挂钩，因此下拉菜单未打开
【发布时间】：2021-05-30 05:52:39
【问题描述】：

我正在尝试在我的 React 应用程序中实现基于角色的访问菜单，并使用了 Material UI 中的 NavBar。我以前可以使用它，但是由于我在将其更改为类组件时删除了钩子，因此无法正确显示它，并且无法使下拉菜单正常工作。

我还有一个问题，因为我的 Redux 中有一个“用户”json，并且由于某种原因，componentDidMount 没有为我提取 userRole 编号以显示特定角色的正确选项。

控制台错误消息

Warning: Failed prop type: The prop `open` is marked as required in `ForwardRef(Menu)`, but its value is `null`
Warning: Failed prop type: The prop `open` is marked as required in `ForwardRef(Popover)`, but its value is `null`.
Warning: Failed prop type: The prop `open` is marked as required in `ForwardRef(SimpleBackdrop)`, but its value is `null`.
Warning: Failed prop type: The prop `open` is marked as required in `Unstable_TrapFocus`, but its value is `null`.
Warning: Failed prop type: Material-UI: You are providing an onClick event listener to a child of a button element.
Firefox will never trigger the event.

scubaNavBar.component.js


    class ScubaNavbar extends Component {
    
      constructor(props) {
    
        super(props);
    
        this.logOut = this.logOut.bind(this);
    
        this.state = {
          showUserLevelAccess: false,
          showSchoolLevelAccess: false,
          showAdminLevelAccess: false,
          user: undefined,
          anchorEl: null,
          mobileMoreAnchorEl: null,
          isMenuOpen: null,
          isMobileMenuOpen: null,
        };
    
        history.listen((location) => {
          props.dispatch(clearMessage());
        });
      }
    
      componentDidMount() {
    
        const user = this.props.user;
        if (user) {
          this.setState({
            currentUser: user,
            showUserLevelAccess: user.userRoles === 1,
            showSchoolLevelAccess: user.userRoles === 2,
            showSiteAdminLevelAccess: user.userRoles === 3,
          });
        }
      }
    
      logOut() {
        this.props.dispatch(logout());
      }
    
      render() {
    
        const {
          // current user gives specific user details
          currentUser,
          // levels give role access
          showUserLevelAccess,
          showSchoolLevelAccess,
          showSiteAdminLevelAccess,
        } = this.state;
    
        const { classes } = this.props;
    
        **const handleProfileMenuOpen =() => {
           this.setState({anchorEl: this.currentTarget, open: Boolean(this.currentTarget)});
        };
        const handleMenuClose = () => {
          this.setState({anchorEl: this.currentTarget === null});
        };
        const handleMobileMenuOpen = () => {
          this.setState({mobileMoreAnchorEl: this.currentTarget, open: Boolean(this.currentTarget)});
        };
        const handleMobileMenuClose = () => {
          this.setState({mobileMoreAnchorEl: this.currentTarget === null});
        };**
    
        const menuId = 'dark-search-account-menu';
    
        const renderMenu = (
    
            <Menu
                anchorEl={this.state.anchorEl}
                anchorOrigin={{vertical: 'top', horizontal: 'right'}}
                id={menuId}
                keepMounted
                transformOrigin={{vertical: 'top', horizontal: 'right'}}
                open={this.state.isMenuOpen}
                onClose={handleMenuClose}>

【问题讨论】：

标签： reactjs material-ui role-based-access-control

【解决方案1】：

根据doc，open prop 接收的值应该是一个布尔值。因此，只需在您的状态下分配 isMenuOpen: false 即可。

【讨论】：

【解决方案2】：

您可以阅读几乎说明一切的控制台消息。它说您缺少作为布尔值的开放道具，它负责是否显示您的下拉菜单。


    <Menu
      nchorEl={this.state.anchorEl}
      anchorOrigin={{vertical: 'top', horizontal: 'right'}}
      id={menuId}
      keepMounted
      transformOrigin={{vertical: 'top', horizontal: 'right'}}
      open={this.state.isMenuOpen} // initially you are setting this null on your constructor change it to false.
      onClose={handleMenuClose}>
    ```
And second warning says you are attaching event to a children of a button. Move that onclick handler to your button or your menu list item.

【讨论】：