How to set state in React and Material-ui over .js files?

问题

I'm new for React and Material-UI too. I have this App.js file:

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;

...and this is the DrawerMenu.js file:

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

Is there any way to set the IconButton's onClick value in App.js file to set the DrawerMenu's state open:true ? For example:

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

...or something like this?

回答1:

You can use props to achieve desired behavior.

Example

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

来源：https://stackoverflow.com/questions/46879693/how-to-set-state-in-react-and-material-ui-over-js-files

标签

reactjs

material-ui