react 使用antd導航組件實現事件傳遞並局部刷新DOM

 

我們要實現一個通過點擊頂部導航來查詢左側菜單的一個功能

在這個功能中，我們要應用到onClick={this.headNavMenuList.bind(this)}方法來傳遞點擊 不同按鈕來傳遞不同的值 

注意：如果 我們要在后續事件中使用傳遞過來的參數來更新局部DOM，則可以不加.bind(this),否則會報出警告

 

 

adtd中的事件與常用的事件略有不同，是在父層窗口上綁定事件，通過相同的key值來實現不同的數據傳遞

onClick={this.headNavMenuList.bind(this)}

<Menu  mode="horizontal" selectedKeys={[]} onClick={this.headNavMenuList.bind(this)}>

參數mode表示排列方式，selectedKeys的值就和<Menu.Item key="">的key值相同時，該<Menu.Item key="">就是選中狀態，

onClick事件函數的參數表示事件源，即點擊哪個菜單元素，e就表示哪個菜單元素

 

我們通過.bind(this)來綁定子元素的key值 來達到點擊 不同按鈕效果

然后通過this.setState()方法來重新對元素賦值並更新DOM

let Page = React.createClass({
    mixins: [LoadingMixin,NotificationMixin,RequestMixin],
    getInitialState() {
        let userInfo = LocalService.getUserInfo() && JSON.parse(LocalService.getUserInfo()) || {};
        return {
            routes: [],
            modules: modules || [],
            curSelectedMenuKey: [],
            userInfo: userInfo,
            openKeys: [],
            prolist:prolist,
            headNav:[{number:"1",name:"iframe"},{number:"2",name:"itable"},{number:"3",name:"home"}],
            
        }
    },
headNavMenuList(e){
        let prolistId = e.key;
        this.get({
            url: "Api/search/module/menu/key/dac509bd90a231239291e12c24a6f1af4bac",
            param: {
                proid: prolistId,
                userid:this.state.userInfo.id
            },
            noLoading: true
        }).then(result=> {
            this.setState({modules: result.result || []});
            // callback && callback(result.result || []);
        })
    },
render(){
    return (
      <div className="app-main">
                <div className="app-header">
                    <div className="header-title" >管理后台</div>
                    <Menu
                        theme="dark"
                        mode="horizontal"
                        defaultSelectedKeys={['1']}
                        style={{ lineHeight: '64px' }}
                        onClick={this.headNavMenuList}
                    >
                        {
                            this.state.headNav && this.state.headNav.map((items,index) =>{
                                for(let i=0;i<prolist.prolist.length;i++){
                                    if(prolist.prolist[i] == items.number){
                                        return (
                                            <Menu.Item key={prolist.prolist[i]} >{items.name}</Menu.Item>
                                        )
                                    }

                                }

                            })


                        }
                    </Menu>
                    
                </div>   

       div className="app-wrap">
                    <div className="nav-sider" >
                        <Menu
                            mode="inline"
                            selectedKeys={this.state.curSelectedMenuKey}
                            openKeys={this.state.openKeys}
                            onOpenChange= {this.onOpenChange}
                            style={{ height: '100%', borderRight: 0 }}
                            onClick={this.handleMenuItemClick}
                            className="scroll"
                        >
                            {

                                this.state.modules && this.state.modules.map((subItem,index) => {
                                    if (subItem.hasChildren) {
                                        return (
                                            <SubMenu key={subItem.id} title={subItem.title}  >
                                                {
                                                    subItem.children &&  subItem.children.map((item,j) => {
                                                        return (
                                                            <Menu.Item key={item.id} onClick={this.handleMenuItemClick}>{item.title}</Menu.Item>
                                                        )
                                                    })
                                                }
                                            </SubMenu>
                                        )
                                    }
                                    else {
                                        return (
                                            <Menu.Item key={subItem.id} >{subItem.title}</Menu.Item>
                                        )
                                    }
                                })
                            }
                        </Menu>
                    </div>
     )
}