<Menu
theme="dark"
mode="inline"
onClick={this.handleClickGoTo}
selectedKeys={[this.state.selectedKey]}
onOpenChange={this.onOpenChange}
openKeys={[this.state.openKey]}
>
...
</Menu>
constructor(props) {
super(props);
this.state = {
selectedKey: this.props.location.pathname, //选中
openKey: "", //展开
};
}
handleClickGoTo = (e) => {//点击事件
this.setState({ selectedKey: e.key });
};
onOpenChange = (k) => { // 展开收缩更新状态
if (k.length > 1) {
this.setState({ openKey: k[k.length - 1] });
} else {
this.setState({ openKey: "" });
}
};
componentDidMount(){
// 刷新菜单更新默认状态
const { pathname } = this.props.location;
let path = pathname.split("/");
if (pathname.split("/").length > 2) {
path = path[path.length - 2];
this.setState({
openKey: path,
});
}
let path2 = pathname.split("/");
if (pathname.split("/").length > 2) {
path2 = path2[path2.length - 1];
this.setState({
selectedKey: path2,
});
}
// 浏览器前进后退按钮更新菜单状态
if (window.history && window.history.pushState) {
window.onpopstate = function () {
window.location.reload(true); //刷新页面
};
}
}