ReactとMaterial-UI over .jsファイルの状態を設定するには？

Question

ReactとMaterial-UIについても新しいです。私は、これはファイルApp.js持っている：

import React, {Component} from 'react'; 
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 
import AppBar from 'material-ui/AppBar'; 
import IconButton from 'material-ui/IconButton'; 
import NavigationMenu from 'material-ui/svg-icons/navigation/menu'; 
import DrawerMenu from './DrawerMenu'; 

const AppBarIcon =() => (
    <AppBar 
    title="Title" 
    iconElementLeft={<IconButton onClick={???}> 
         <NavigationMenu /> 
        </IconButton>} 
    /> 
); 

class App extends Component { 
    render() { 
     return (
      <div className="App"> 
       <MuiThemeProvider> 
        <div> 
         <DrawerMenu /> 
         <AppBarIcon /> 
        </div> 
       </MuiThemeProvider> 
      </div> 
     ); 
    } 
} 

export default App; 

を...と、これはDrawerMenu.jsファイルです：

import React from 'react'; 
import Drawer from 'material-ui/Drawer'; 
import MenuItem from 'material-ui/MenuItem'; 

export default class DrawerSimpleExample extends React.Component { 

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

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

    render() { 
    return (
     <div> 
     <Drawer open={this.state.open}> 
      <MenuItem>Menu Item</MenuItem> 
      <MenuItem>Menu Item 2</MenuItem> 
     </Drawer> 
     </div> 
    ); 
    } 
} 

することにApp.jsファイルにIconButtonのonClick値を設定する方法はありますDrawerMenuの状態をopen:trueに設定しますか？例：

<IconButton onClick={ DrawerMenu.setState({open:true}) }> 

...このようなものですか？

Answer 1

希望の動作を達成するためにpropsを使用できます。

例

const AppBarIcon = (props) => (
    <AppBar 
    title="Title" 
    iconElementLeft={<IconButton onClick={props.onIconClick}> 
         <NavigationMenu /> 
        </IconButton>} 
    /> 
); 

class App extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { isOpen: false }; 
    } 

    onIconClick =() => { 
     this.setState((prevState) => ({ isOpen: !prevState.isOpen })); 
    } 
    render() { 
     return (
      <div className="App"> 
       <MuiThemeProvider> 
        <div> 
         <DrawerMenu isOpen={this.state.isOpen} /> 
         <AppBarIcon onIconClick={this.onIconClick} /> 
        </div> 
       </MuiThemeProvider> 
      </div> 
     ); 
    } 
} 

---

export default class DrawerSimpleExample extends React.Component { 

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

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


    render() { 
    return (
     <div> 
     <Drawer open={this.props.isOpen}> 
      <MenuItem>Menu Item</MenuItem> 
      <MenuItem>Menu Item 2</MenuItem> 
     </Drawer> 
     </div> 
    ); 
    } 
}