react 使用antd导航组件实现事件传递

发布时间：2020-12-15 20:40:22 所属栏目：百科来源：网络整理

导读：Menu theme ="dark" mode ="horizontal" defaultSelectedKeys ={[‘1‘ ]} style ={{ lineHeight: ‘64px‘ }} onClick ={ this .headNavMenuList.bind( this )} { this .state.headNav this .state.headNav.map((items,index) = { for (let i=0;iprolist.pr

<Menu
                        theme="dark"
                        mode="horizontal"
                        defaultSelectedKeys={[‘1‘]}
                        style={{ lineHeight: ‘64px‘ }}
                        onClick={this.headNavMenuList.bind(this)}
                    >
                        {
                            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>

headNavMenuList(e){
        let prolistId = e.key;
        this.get({
            url: "Api/lists/module/menu/key/d291e12c24a6f1af4bac",param: {
                proid: prolistId,},noLoading: true
        }).then(result=> {
            console.log(‘result+++++++++‘,result)
            let menuList = result.result;
            this.state.modules = menuList;
            console.log(‘this.state.modules+++++++++‘,this.state.modules)
        })
    },

adtd中的事件与常用的事件略有不同，是在父层窗口上绑定事件，通过相同的key值来实现不同的数据传递

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

参数mode表示排列方式，selectedKeys的值就和<Menu.Item key="">的key值相同时，该<Menu.Item key="">就是选中状态，

onClick事件函数的参数表示事件源，即点击哪个菜单元素，e就表示哪个菜单元素

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!