react-router+antD/如何在按下后退/前进按钮时突出显示菜单项? [英] react-router+antD/ How to highlight a menu item when press back/forward button?

问题描述

我创建了一个菜单并想突出显示我选择的项目，我做到了.但是当我按下后退/前进按钮时，菜单项不会突出显示.我该怎么办?

我曾尝试使用 addEventListener 但失败了.

有人能给点建议吗?

class Sidebar extends React.Component {构造函数(道具){超级(道具)；this.state={测试:家"}this.menuClickHandle = this.menuClickHandle.bind(this);}componentWillMount(){hashHistory.listen((事件)=>{test1 = event.pathname.split("/");});this.setState({测试:测试1[1]});}菜单点击句柄(项目){this.props.clickItem(item.key);}onCollapseChange() {this.props.toggle();}使成为() {var {collapse} = this.props;返回 (<aside className="ant-layout-sider"><Menu mode="inline" theme="dark" defaultSelectedKeys={[this.state.test ||"home"]} onClick={this.menuClickHandle.bind(this)}><Menu.Item key="home"><链接到="/home"><Icon type="user"/><span className="nav-text">用户管理</span></链接></Menu.Item><Menu.Item key="banner"><链接到="/横幅"><Icon type="setting"/><span className="nav-text">横幅管理</span></链接></Menu.Item></菜单><div className="ant-aside-action" onClick={this.onCollapseChange.bind(this)}>{坍塌 ?<图标类型=右"/>:<图标类型="左"/>}

</一边>)}}

解决方案

截取当前 URL 然后设置 selectedKeys(注意不是 defaultSelectedKeys).

componentWillMount(){hashHistory.listen((事件)=>{pathname = event.pathname.split("/");如果(路径名！= null){this.setState({测试:路径名[1]});}});}

I create a menu and want to highlight the item which i choose,and i did it. But when i press back/forward button,the menu item don't highlight. What should i do?

I have tried to use addEventListener but failed.

Have someone could give some advice?

class Sidebar extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            test: "home"
        }
        this.menuClickHandle = this.menuClickHandle.bind(this);
    }

    componentWillMount(){
        hashHistory.listen((event)=>{
            test1 = event.pathname.split("/");
        });
        this.setState({
            test:test1[1]
        });
    }

    menuClickHandle(item) {
        this.props.clickItem(item.key);
    }

    onCollapseChange() {
        this.props.toggle();
    }

    render() {
        var {collapse} = this.props;
        return (
            <aside className="ant-layout-sider">
                <Menu mode="inline" theme="dark" defaultSelectedKeys={[this.state.test || "home"]} onClick={this.menuClickHandle.bind(this)}>
                    <Menu.Item key="home">
                        <Link to="/home">
                            <Icon type="user"/><span className="nav-text">用户管理</span>
                        </Link>
                    </Menu.Item>
                    <Menu.Item key="banner">
                        <Link to="/banner">
                            <Icon type="setting"/><span className="nav-text">Banner管理</span>
                        </Link>
                    </Menu.Item>
                </Menu>
                <div className="ant-aside-action" onClick={this.onCollapseChange.bind(this)}>
                    {collapse ? <Icon type="right"/> : <Icon type="left"/>}
                </div>
            </aside>
        )
    }
}

解决方案

Intercepts the current URL and then set selectedKeys（Note that it is not defaultSelectedKeys）.

componentWillMount(){
        hashHistory.listen((event)=>{
            pathname = event.pathname.split("/");
            if(pathname != null){
                this.setState({
                    test:pathname[1]
                });
            }
        });
    }

这篇关于react-router+antD/如何在按下后退/前进按钮时突出显示菜单项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！