सामग्री यूआई - ऐपबार पर ओपन वामनाव/ड्रॉवर पर क्लिक करें

Question

मैं रेक्टजेएस और सामग्री-ui (http://material-ui.com/) की खोज कर रहा हूं।

मैं अपने आवेदन के लिए एक डिफ़ॉल्ट टेम्पलेट बनाने का प्रयास करता हूं। मैं अलग-अलग घटकों में एक ऐपबार और वामनाव (नए संस्करणों में दराज में नामित) का उपयोग करना चाहता हूं।

ऐपबार में डिफ़ॉल्ट रूप से मेनू बटन है। मैं इसे वामनाव खोलने के लिए उपयोग करना चाहता हूं लेकिन मुझे नहीं पता कि मैं इसे खोलने के लिए अपने LeftBarComponent घटक फ़ंक्शन को कैसे कॉल कर सकता हूं।

मुझे लगभग समझ में आया है कि घटकों के बीच संवाद कैसे करें, लेकिन मेरे मामले में, मुझे नहीं पता कि मैं कैसे कर सकता हूं क्योंकि इसके बारे में कोई दस्तावेज नहीं है। केवल एक चीज मैं LeftNav तत्व को खोलने के लिए पता है आपकी मदद के लिए LeftNav.toggle उपयोग करने के लिए()

http://material-ui.com/#/components/left-nav

धन्यवाद है।

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; 

navbar.jsx

'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; 

leftbar.jsx

'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; 

Answer 1

इस मामले में आप nee डी को अपने घटकों के माध्यम से ऊपर की ओर पारित करने के लिए, और फिर फिर से नीचे।

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

हालांकि, Reactjs साथ संयोजन के रूप में इस का उपयोग नहीं इष्टतम, के रूप में LeftNav सामग्री घटक विशेषताओं लिए प्रतिक्रिया नहीं करता है, लेकिन विधि के लिए कॉल आप की तरह कह रहे थे।

आसपास काम करने के लिए, आप वामनाव रेंडर विधि में एक चेक डाल सकते हैं, जो वर्तमान स्थिति की जांच करता है, और यदि आवश्यक हो तो टॉगल() कॉल करता है। सिद्धांत रूप में यह सोचने के वास्तविक तरीके के खिलाफ चला जाता है, क्योंकि एक राज्य विशिष्ट बाल घटक के अंदर होता है, न कि डिफ़ॉल्ट कॉम्पोनेंट में जो इसे संभालता है।

render:function(){ 
    if(this.props.isOpen){ 
    LeftNav.open(); 
    } 
    return ... 

Answer 2

स्पष्ट करने के लिए steinso क्या कहा, आप एक लड़ाई फ्लक्स वास्तुकला का प्रयोग करने के लिए घटना भेजने और फिर एक स्टोर में इसे बदलने की जरूरत है। फिर EventEmitter के साथ एक उत्सर्जन परिवर्तन घटना प्रेषित करें। यह अद्यतन राज्य के साथ प्रभावित घटकों पर एक रेंडर बंद कर देगा।

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

आप उन्हें तो अलग किया है चाहिए, कि सबसे अच्छा तरीका होगा। हालांकि, यदि आप उन्हें एक ही घटक में रख सकते हैं, जैसे कि 'मुख्य', तो आप बस एक रेफरी विशेषता का उपयोग कर सकते हैं और घटक का संदर्भ दे सकते हैं।

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> 
    ); 
    } 

}); 

ऐसा ही।

Answer 3

मैं सामग्री-यूआई के साथ प्रतिक्रिया का उपयोग कर रहा हूं और मैंने ऐपबार में ऑनलेफ्टिकॉनबटन टचटैप = {this.handleToggle} ईवेंट का उपयोग करके ऐसा किया है।और अधिक विस्तार के लिए, आप आधिकारिक दस्तावेज http://www.material-ui.com/#/components/app-bar

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; 

मुझे लगता है कि यह आप में मदद मिलेगी उल्लेख कर सकते हैं।