react 使用antd導航元件實現事件傳遞
阿新 • • 發佈:2018-11-13
<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)}
<Menu mode="horizontal" selectedKeys={[]} onClick={this.headNavMenuList.bind(this)}>
引數mode表示排列方式,selectedKeys的值就和<Menu.Item key="">的key值相同時,該<Menu.Item key="">就是選中狀態,
onClick事件函式的引數表示事件源,即點選哪個選單元素,e就表示哪個選單元素