Как использовать материал ui методы на модулях

Question

Im учебный материал ui и reactjs для проекта. Atm im просто пытается использовать различные модули материала ui. Например, у меня есть этот модуль, и я хочу использовать RaisedButtom для переключения LeftNav, но я пробовал почти все, и я не работал.

здесь вы можете увидеть мой модуль:

var React = require('react'), 
    mui = require('material-ui'), 
    RaisedButton = mui.RaisedButton; 
    LeftNav = mui.LeftNav; 
    FontIcon = mui.FontIcon; 
    menuItems = mui.menuItems; 
    Tabs = mui.Tabs; 
    Tab = mui.Tab; 

var Main = React.createClass({ 


    render: function() { 


    return (

     <div className="page"> 
     <Tabs> 
      <Tab label="Item One" > 
      <div className="tab-template-container"> 
       <h2 className="mui-font-style-headline">Tab One Template Example</h2> 
       <p> 
       This is an example of a tab template! 
       </p> 
       <p> 
       You can put any sort of HTML or react component in here. 
       </p> 
      </div> 
      </Tab> 
      <Tab label="Item Two" > 
      <div className="tab-template-container"> 
       <h2 className="mui-font-style-headline">Tab Two Template Example</h2> 
       <p> 
       This is another example of a tab template! 
       </p> 
       <p> 
       Fair warning - the next tab routes to home! 
       </p> 
      </div> 
      </Tab> 
     </Tabs> 
     <div className="example-page"> 
      <LeftNav docked={true} menuItems={"numberMenuItems"} /> 
      <h1>material-ui</h1> 
      <h2>example project</h2> 
      <RaisedButton label="Super Secret Password" primary={true} onClick=LeftNav.toggle(); /> 
     </div> 
     </div> 
    ); 
    }, 



    toggle_menu: function() { 

    alert('click'); 

    } 

}); 

module.exports = Main; 

настороже работает, но им не уверен, как использовать метод LeftNav.toggle()

Спасибо очень много !!

Answer 1

Вы можете получить ссылку на пример LeftNav по адресу using a ref. Нечто подобное должно сделать трюк:

... 
<div className="example-page"> 
    <LeftNav ref="nav" docked={true} menuItems={"numberMenuItems"} /> 
    ... 
    <RaisedButton label="Super Secret Password" primary={true} onClick={this.toggleMenu} /> 
</div> 
... 

toggleMenu: function() { 
    // since we put `ref="nav"` on the LeftNav, we can get to it 
    // via `this.refs.nav` 
    this.refs.nav.toggle(); 
} 

В самом деле, LeftNav demo page делает именно это, и вы можете увидеть in the source for the demo, что это именно то, как он это делает:

render: function() { 
    // ... 

    return (
    <ComponentDoc 
     name="Left Nav" 
     code={code} 
     componentInfo={componentInfo}> 

     <div className="left-nav-example"> 
     <RaisedButton label="Toggle Docked Left Nav" onTouchTap={this._toggleDockedLeftNavClick} /><br/><br/> 
     <RaisedButton label="Show Hideable Left Nav" onTouchTap={this._showLeftNavClick} /> 
     <LeftNav ref="dockedLeftNav" docked={this.state.isDocked} menuItems={menuItems} /> 
     <LeftNav ref="leftNav" docked={false} menuItems={menuItems} /> 
     </div> 

    </ComponentDoc> 
); 
}, 

_showLeftNavClick: function() { 
    this.refs.leftNav.toggle(); 
}, 

_toggleDockedLeftNavClick: function() { 
    this.refs.dockedLeftNav.toggle(); 
    this.setState({ 
    isDocked: !this.state.isDocked 
    }); 
} 

Answer 2

выше это отличный способ , Однако, если вы используете Flux-архитектуру, вы можете захотеть просмотреть состояние захвата в хранилище и передать его методу рендеринга.

Бонус к этому методу состоит в том, что вы можете видеть состояние когда бы то ни было.

https://facebook.github.io/flux/