如何在“抽屉-材质UI”中将MenuItem设置为活动状态？ [英] How can I set a MenuItem as active in Drawer - Material UI?

问题描述

我有以下代码：

 <抽屉
停靠= {false} 
宽度= {330} 
打开= {this.state.drawerOpen} 
 onRequestChange = {（drawerOpen）=> this.setState（{drawerOpen}）} 
> 
 
< MenuItem primaryText = Inicio onTouchTap = {this.drawerOpened} containerElement = {<链接到= / administrador / inicio />} /> 
< MenuItem primaryText = Nueva Incidencia onTouchTap = {this.drawerOpened} containerElement = {<链接到= / administrador / nueva_incidencia />} /> 
< MenuItem primaryText = Incidencias Recibidas onTouchTap = {this.drawerOpened} containerElement = {<链接到= / administrador / incidencias_recibidas />} /> 
< MenuItem primaryText = Informes / * onTouchTap = {（）=> this.currentPages（‘Informes’）} * / onTouchTap = {this.drawerOpened} containerElement = {<链接到= / administrador / informes />} /> 
< /抽屉> 
  

我希望当我单击一个MenuItem时将其设置为 active（例如在Bootstrap中），具有背景lighgrey和类似的样式。我该怎么办？问题也归结于React-Router，它卸载了组件Menu并再次重新渲染，因此状态不可用。

谢谢。

解决方案

这是我的解决方法：

定义函数：

isActive =（值）=>（location.pathname ===值？'active'：''）

 < MenuItem primaryText = Inicio onTouchTap = {this.drawerOpened} 
 className = {this.isActive（'/ administrador / inicio'）} 
 containerElement = {<链接到= / administrador / inicio />} /> 
  

现在您只是缺少了活跃的de css样式。

I have this code:

            <Drawer 
                docked = {false}
                width = {330}
                open = {this.state.drawerOpen}
                onRequestChange = {(drawerOpen) => this.setState({drawerOpen})}
            >

                    <MenuItem primaryText="Inicio" onTouchTap = {this.drawerOpened} containerElement = {<Link to="/administrador/inicio"/>}/>
                    <MenuItem primaryText="Nueva Incidencia" onTouchTap = {this.drawerOpened} containerElement = {<Link to="/administrador/nueva_incidencia"/>}/>
                    <MenuItem primaryText="Incidencias Recibidas" onTouchTap = {this.drawerOpened} containerElement = {<Link to="/administrador/incidencias_recibidas"/>}/>
                    <MenuItem primaryText="Informes" /*onTouchTap = {() => this.currentPages('Informes')}*/onTouchTap = {this.drawerOpened} containerElement = {<Link to="/administrador/informes"/>}/>
            </Drawer>

I want that when I click on one MenuItem, it set up as 'active' (as in Bootstrap), with a background lighgrey and similar styles. How could I do this?. The problem is due to React-Router too, which unmount the component Menu and Re-Render it again, so states are not available.

Thank you.

解决方案

Here is my workaround:

define function:

isActive = (value) => (location.pathname === value ? 'active' : '')

<MenuItem primaryText="Inicio" onTouchTap = {this.drawerOpened} 
className={this.isActive('/administrador/inicio')}
containerElement = {<Link to="/administrador/inicio"/>}/>

now you are just missing de css styles for 'active'.

这篇关于如何在“抽屉-材质UI”中将MenuItem设置为活动状态？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！