自从我更改为组件类并删除挂钩后，下拉列表未打开

问题描述

我正在尝试在我的 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}>

解决方法

根据doc，open prop 接收的值应该是一个布尔值。因此，只需在您所在的州分配 isMenuOpen: false，它就可以正常工作。

,

您可以阅读几乎说明了一切的控制台消息。 它说你缺少 open prop 作为布尔值，它负责是否显示你的下拉列表。

    <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.