Reactjs 物料界面-在应用栏上打开左侧导航/抽屉单击

我发现了ReactJS和materialui（）

我尝试为我的应用程序创建默认模板。 我想在单独的组件中使用AppBar和LeftNav（在新版本中在抽屉中重命名）

默认情况下，AppBar上有一个菜单按钮。我想用它来打开LeftNav，但我不知道如何调用LeftBarComponent函数来打开它

我几乎已经了解了如何在组件之间进行通信，但就我而言，我不知道该怎么做，因为没有关于它的文档。 我所知道的打开LeftNav元素的唯一方法是使用LeftNav.toggle（）

谢谢你的帮助

Default.jsx

use strict';

var React = require('react');
var pageStore = require('../../stores/page');

var MainNavbar = require('../modules/navbar.jsx');
var LeftNavbar = require('../modules/leftbar.jsx');

var getState = function() {
  return {
    title: pageStore.get().title
  };
};

var DefaultComponent = React.createClass({
  mixins: [pageStore.mixin],
  componentDidMount: function() {
    pageStore.emitChange();
  },
  getInitialState: function() {
    return getState();
  },
  render: function() {
    return (
      /* jshint ignore:start */
      <div className="main-container">
        <MainNavbar />
        <LeftNavbar />
        <div className="content">
          {this.props.children}
        </div>
      </div>
      /* jshint ignore:end */
    );
  },
  // Event handler for 'change' events coming from store mixins.
  _onChange: function() {
    this.setState(getState());
  }
});

module.exports = DefaultComponent;

'use strict';

var React = require('react');
var routeActions = require('../../actions/routes');

var MUI = require('material-ui');
var AppBar = MUI.AppBar;

// Navbar Component
// Application main menu
// Usage: <Navbar />
var NavbarComponent = React.createClass({
  render: function() {
    return (
      /* jshint ignore:start */
      <AppBar title="MyApp" onMenuIconButtonTouchTap={ this._handleClick }>
        <div className="clear"></div>
      </AppBar>
      /* jshint ignore:end */
    );
  },
  _handleClick: function()
  {
    console.log('ok');
  }
});

module.exports = NavbarComponent;

'use strict';

var React = require('react');
var routeActions = require('../../actions/routes');

var MUI = require('material-ui');
var LeftNav = MUI.LeftNav;
var MenuItem = MUI.MenuItem;

var menuItems = [
  { route: 'home', text: 'Home' },
  { route: 'about', text: 'About' },
];

// LeftBar Component
// Application left menu
// Usage: <LeftBar />
var LeftBarComponent = React.createClass({
  render: function() {
    return (
      /* jshint ignore:start */
      <LeftNav menuItems={menuItems} docked={false} />
      /* jshint ignore:end */
    );
  },
  _handleClick: function()
  {
    console.log('ok');
  }
});

module.exports = LeftBarComponent;

使用strict'；
var React=要求（'React'）；
var pageStore=require（'../../stores/page'）；
var MainNavbar=require（'../modules/navbar.jsx'）；
var LeftNavbar=require（'../modules/leftbar.jsx'）；
var getState=function（）{
返回{
标题：pageStore.get（）.title
};
};
var DefaultComponent=React.createClass({
mixin:[pageStore.mixin]，
componentDidMount:function（）{
pageStore.emitChange（）；
},
getInitialState:函数（）{
返回getState（）；
},
render:function（）{
返回(
/*jshint忽略：开始*/
{this.props.children}
/*jshint忽略：结束*/
);
},
//来自存储混合的“更改”事件的事件处理程序。
_onChange:function（）{
this.setState（getState（））；
}
});
module.exports=默认组件；

navbar.jsx

use strict';

var React = require('react');
var pageStore = require('../../stores/page');

var MainNavbar = require('../modules/navbar.jsx');
var LeftNavbar = require('../modules/leftbar.jsx');

var getState = function() {
  return {
    title: pageStore.get().title
  };
};

var DefaultComponent = React.createClass({
  mixins: [pageStore.mixin],
  componentDidMount: function() {
    pageStore.emitChange();
  },
  getInitialState: function() {
    return getState();
  },
  render: function() {
    return (
      /* jshint ignore:start */
      <div className="main-container">
        <MainNavbar />
        <LeftNavbar />
        <div className="content">
          {this.props.children}
        </div>
      </div>
      /* jshint ignore:end */
    );
  },
  // Event handler for 'change' events coming from store mixins.
  _onChange: function() {
    this.setState(getState());
  }
});

module.exports = DefaultComponent;

'use strict';

var React = require('react');
var routeActions = require('../../actions/routes');

var MUI = require('material-ui');
var AppBar = MUI.AppBar;

// Navbar Component
// Application main menu
// Usage: <Navbar />
var NavbarComponent = React.createClass({
  render: function() {
    return (
      /* jshint ignore:start */
      <AppBar title="MyApp" onMenuIconButtonTouchTap={ this._handleClick }>
        <div className="clear"></div>
      </AppBar>
      /* jshint ignore:end */
    );
  },
  _handleClick: function()
  {
    console.log('ok');
  }
});

module.exports = NavbarComponent;

'use strict';

var React = require('react');
var routeActions = require('../../actions/routes');

var MUI = require('material-ui');
var LeftNav = MUI.LeftNav;
var MenuItem = MUI.MenuItem;

var menuItems = [
  { route: 'home', text: 'Home' },
  { route: 'about', text: 'About' },
];

// LeftBar Component
// Application left menu
// Usage: <LeftBar />
var LeftBarComponent = React.createClass({
  render: function() {
    return (
      /* jshint ignore:start */
      <LeftNav menuItems={menuItems} docked={false} />
      /* jshint ignore:end */
    );
  },
  _handleClick: function()
  {
    console.log('ok');
  }
});

module.exports = LeftBarComponent;

“严格使用”；
var React=要求（'React'）；
var routeActions=require（'../../actions/routes'）；
var MUI=要求（“材料-ui”）；
var-AppBar=MUI.AppBar；
//导航栏组件
//应用程序主菜单
//用法：
var NavbarComponent=React.createClass({
render:function（）{
返回(
/*jshint忽略：开始*/
/*jshint忽略：结束*/
);
},
_handleClick:function（）
{
console.log（'ok'）；
}
});
module.exports=NavbarComponent；

leftbar.jsx

use strict';

var React = require('react');
var pageStore = require('../../stores/page');

var MainNavbar = require('../modules/navbar.jsx');
var LeftNavbar = require('../modules/leftbar.jsx');

var getState = function() {
  return {
    title: pageStore.get().title
  };
};

var DefaultComponent = React.createClass({
  mixins: [pageStore.mixin],
  componentDidMount: function() {
    pageStore.emitChange();
  },
  getInitialState: function() {
    return getState();
  },
  render: function() {
    return (
      /* jshint ignore:start */
      <div className="main-container">
        <MainNavbar />
        <LeftNavbar />
        <div className="content">
          {this.props.children}
        </div>
      </div>
      /* jshint ignore:end */
    );
  },
  // Event handler for 'change' events coming from store mixins.
  _onChange: function() {
    this.setState(getState());
  }
});

module.exports = DefaultComponent;

'use strict';

var React = require('react');
var routeActions = require('../../actions/routes');

var MUI = require('material-ui');
var AppBar = MUI.AppBar;

// Navbar Component
// Application main menu
// Usage: <Navbar />
var NavbarComponent = React.createClass({
  render: function() {
    return (
      /* jshint ignore:start */
      <AppBar title="MyApp" onMenuIconButtonTouchTap={ this._handleClick }>
        <div className="clear"></div>
      </AppBar>
      /* jshint ignore:end */
    );
  },
  _handleClick: function()
  {
    console.log('ok');
  }
});

module.exports = NavbarComponent;

'use strict';

var React = require('react');
var routeActions = require('../../actions/routes');

var MUI = require('material-ui');
var LeftNav = MUI.LeftNav;
var MenuItem = MUI.MenuItem;

var menuItems = [
  { route: 'home', text: 'Home' },
  { route: 'about', text: 'About' },
];

// LeftBar Component
// Application left menu
// Usage: <LeftBar />
var LeftBarComponent = React.createClass({
  render: function() {
    return (
      /* jshint ignore:start */
      <LeftNav menuItems={menuItems} docked={false} />
      /* jshint ignore:end */
    );
  },
  _handleClick: function()
  {
    console.log('ok');
  }
});

module.exports = LeftBarComponent;

“严格使用”；
var React=要求（'React'）；
var routeActions=require（'../../actions/routes'）；
var MUI=要求（“材料-ui”）；
var LeftNav=MUI.LeftNav；
var MenuItem=MUI.MenuItem；
变量菜单项=[
{路由：'home'，文本：'home'}，
{路由：'about'，文本：'about'}，
];
//左栏组件
//应用程序左菜单
//用法：
var LeftBarComponent=React.createClass({
render:function（）{
返回(
/*jshint忽略：开始*/
/*jshint忽略：结束*/
);
},
_handleClick:function（）
{
console.log（'ok'）；
}
});
module.exports=LeftBarComponent；

在这种情况下，您需要通过组件向上传递事件，然后再向下传递事件

    <MainNavbar onClickMenu=this.onClickMenu/>
    <LeftNavbar isOpen=this.state.leftNavIsOpen/>

---

为了澄清steinso所说的，您需要使用Flux架构将事件发送到一个Action，然后在商店中更改它。然后使用EventEmitter分派一个emit change事件。这将在具有更新状态的受影响组件上触发渲染

如果你必须把它们分开，那将是最好的办法。但是，如果可以将它们放在同一个组件中，例如“Main”，则可以简单地使用ref属性并引用该组件

module.exports = React.createClass({

  childContextTypes: {
    muiTheme: React.PropTypes.object
  },

  getChildContext: function() {
    return {
      muiTheme: ThemeManager.getCurrentTheme()
    };
  },

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

  render: function() {
    return (
      <div>
        <mui.LeftNav
          ref='leftNav'
          menuItems={menuItems}
          docked={false} />
        <mui.AppBar
          title='Default'
          onLeftIconButtonTouchTap={this._toggleNav} />
      </div>
    );
  }

});

module.exports=React.createClass({
childContextTypes：{
muiTheme:React.PropTypes.object
},
getChildContext:函数（）{
返回{
muiTheme:ThemeManager.getCurrentTheme（）
};
},
_toggleNav:function（）{
this.refs.leftNav.toggle（）；
},
render:function（）{
返回(
);
}
});

---

就像这样。

我正在使用React with Material UI，我已经使用AppBar中的onLefticonButtontTouchTap={this.handleToggle}事件完成了此操作。有关更多详细信息，请参阅官方文档

App.js

import React from 'react';
import AppBar from 'material-ui/AppBar';
import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';  
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'; 
import Dashboard from './Dashboard/dashboard.js';
import Information from './Information/information.js';
import './App.css';

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {open: false};
  }

  handleToggle = (event) => this.setState({open: !this.state.open});

  render() {

    const {styleFromProps} = this.props;
    const contentStyle = {  ...styleFromProps, transition: 'margin-left 450ms cubic-bezier(0.23, 1, 0.32, 1)' };

    if (this.state.open) {
      contentStyle.marginLeft = 256;
    }

    return (
        <Router>
          <div>
          <AppBar title="AppTitle" onLeftIconButtonTouchTap={this.handleToggle} />

            <Drawer containerStyle={{height: 'calc(100% - 64px)', top: 64}} docked={true} width={200} open={this.state.open} zDepth={2}>
              <Link to="/dashboard" style={{ textDecoration: 'none' }}><MenuItem>Dashboard</MenuItem></Link>
              <Link to="/information" style={{ textDecoration: 'none' }}><MenuItem>Information</MenuItem></Link>
            </Drawer>

            <Route path="/dashboard" component={(props) => <Dashboard {...props} open={this.state.open}/>} />
            <Route path="/information" component={(props) => <Information {...props} open={this.state.open}/>} />
          </div>
        </Router>
    );
  }
}

export default App;

从“React”导入React；
从“物料ui/AppBar”导入AppBar；
从“物料界面/抽屉”导入抽屉；
从“物料界面/菜单项”导入菜单项；
从“react Router dom”导入{BrowserRouter as Router，Route，Link}；
从“./Dashboard/Dashboard.js”导入仪表板；
从“./Information/Information.js”导入信息；
导入“/App.css”；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={open:false}；
}
handleToggle=（事件）=>this.setState（{open:！this.state.open}）；
render（）{
const{styleFromProps}=this.props；
constContentStyle={…styleFromProps，transition:'marginleft450ms立方贝塞尔（0.23,1,0.32,1）'}；
if（this.state.open）{
contentStyle.marginLeft=256；
}
返回(
仪表板
问询处
} />
} />
);
}
}
导出默认应用程序；

---

我想这会对你有所帮助。

还可以看到这个问题的答案：谢谢@Rohit帮助了我。这就是我要找的。