材质UI /材质-ui appbar leftnav切换不起作用

时间:2015-07-08 20:32:37

标签: javascript meteor reactjs material-design material-ui

我正在使用meteor react-packages,我正确显示了appbar,但我无法让nav切换工作。我直接使用代码中的代码,我甚至阅读了材料-ui repo中的代码,看起来它应该正常工作。我做错了什么?

let {AppBar, LeftNav} = mui

AppLayout = React.createClass({
  menuItems: [
    {route: '/profile/bio', text: 'bio'},
    {route: '/profile/photos', text: 'photos'},
    {route: '/profile/videos', text: 'videos'},
    {route: '/profile/filmography', text: 'filmography'},
    {route: '/profile/settings', text: 'settings'},
    {route: '/profile/accounts', text: 'accounts'}
  ],

  _toggle(e){
    e.preventDefault()
    this.refs.leftNav.toggle()
  },

  render(){
    return (
      <div>
        <AppBar onLeftIconButtonTouchTap={this._toggle} title='react+meteor'  />
        <LeftNav ref="leftNav" docked={false} menuItems={this.menuItems} />
        <AppView />
      </div>
   )
  }
})

1 个答案:

答案 0 :(得分:5)

所以在这里遵循指南:http://react-in-meteor.readthedocs.org/en/latest/client-npm/

我在这里错过了mui指南的一部分:http://material-ui.com/#/get-started

这是我的lib/app.browserify.js文件:

// material ui
mui = require('material-ui')
injectTapEventPlugin = require("react-tap-event-plugin")
// Needed for onTouchTap
// Can go away when react 1.0 release
// Check this repo:
// https://github.com/zilverline/react-tap-event-plugin
injectTapEventPlugin()

// this is needed for material-ui styling to work properly
ThemeManager = new mui.Styles.ThemeManager()
React.initializeTouchEvents(true)

我错过了这行实际注射的injectTapEventPlugin()行!在我添加并刷新浏览器后,菜单运行正常。