У меня есть AppBar
компонент с меню. Каждый раз, когда я нажимаю на любую из ссылок, происходит навигация, но меню не закрывается.
import MenuItem from '@material-ui/core/MenuItem';
import Menu from '@material-ui/core/Menu';
import { Button } from '@material-ui/core';
import * as ROUTES from '../../constants/routes';
class AppBar extends React.Component {
state = {
anchorEl: null
};
handleCommonMenuOpen = event => {
this.setState({ anchorEl: event.currentTarget });
}
handleCommonMenuClose = () => {
this.setState({ anchorEl: null });
};
render() {
const { anchorEl } = this.state;
const { classes } = this.props;
const isMenuOpen = Boolean(anchorEl);
const renderCommonMenu = (<Menu
anchorEl={anchorEl}
id="tutorials-menu"
anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
transformOrigin={{ vertical: 'top', horizontal: 'right' }}
open={isMenuOpen}
onClose={this.handleCommonMenuClose}
>
<MenuItem onClick={this.handleCommonMenuClose} component={Link} to={ROUTES.AUTHENTICATION_DOC}>Authentication</MenuItem>
<MenuItem onClick={this.handleCommonMenuClose} component={Link} to={ROUTES.REALTIMEDB_DOC}>Realtime DB</MenuItem>
<MenuItem onClick={this.handleCommonMenuClose} component={Link} to={ROUTES.HOSTING_DOC}>Hosting</MenuItem>
</Menu>)
return(
<div>
<Button aria-haspopup="true" aria-controls="tutorials-menu" onClick={this.handleCommonMenuOpen} color="inherit">Tutorials</Button>
{renderCommonMenu}
<Route path={ROUTES.AUTHENTICATION_DOC} component={AuthenticationDoc} />
<Route path={ROUTES.REALTIMEDB_DOC} component={ReattimeDBDoc} />
</div>)
}
}
export default AppBar;
Если я нажму handleCommonMenuClose
, это приведет к ошибке.
"не может преобразовать неопределенное или нулевое значение в объект"
Может кто-нибудь помочь мне решить эту проблему, пожалуйста?