Question

我有一个App Bar组件，我正在使用Material UI v1.0.0-beta.33

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "material-ui/styles";
import AppBar from "material-ui/AppBar";
import Toolbar from "material-ui/Toolbar";
import Typography from "material-ui/Typography";
import Button from "material-ui/Button";
import IconButton from "material-ui/IconButton";
import MenuIcon from "material-ui-icons/Menu";


import TemporaryDrawer from "./Drawer";

const styles = {
  root: {
    width: "100%"
  },
  flex: {
    flex: 1
  },
  menuButton: {
    marginLeft: -12,
    marginRight: 20
  },
};

function ButtonAppBar(props) {
  const { classes } = props;
  return (
    <div className={classes.root}>
        <TemporaryDrawer/>
      <AppBar position="static">
        <Toolbar>
          <IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
            <MenuIcon />
          </IconButton>
          <Typography variant="title" color="inherit" className={classes.flex}>
            Title
          </Typography>
          <Button onClick={} color="inherit">User Name</Button>
        </Toolbar>
      </AppBar>
    </div>
  );
}

ButtonAppBar.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(ButtonAppBar);

正如您所看到的，我正在导入另一个名为 TemporaryDrawer 的组件，在该组件的代码中，有一个名为“ toggleDrawer ”的方法会触发抽屉。

我的问题是如何在上面的代码中使用TemporaryDrawer中的toggleDrawer方法，我有一个onClick方法为空的按钮。

作为参考，我把TemporaryDrawer的代码放在下面：

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "material-ui/styles";
import Drawer from "material-ui/Drawer";
import List from "material-ui/List";
import Divider from "material-ui/Divider";

const styles = {
  list: {
    width: 250
  },
  listFull: {
    width: "auto"
  }
};

class TemporaryDrawer extends React.Component {
  state = {
    left: false
  };

  toggleDrawer = (side, open) => () => {
    this.setState({
      [side]: open
    });
  };

  render() {
    const { classes } = this.props;

    const sideList = (
      <div className={classes.list}>
          <List>AA</List>
          <List>BB</List>
          <List>CC</List>
          <Divider />
          <List>AA1</List>
          <List>BB1</List>
          <List>CB1</List>
      </div>
    );

    return (
      <div>
        <Drawer open={this.state.left} onClose={this.toggleDrawer("left", false)}>
          <div
            tabIndex={0}
            role="button"
            onClick={this.toggleDrawer("left", false)}
            onKeyDown={this.toggleDrawer("left", false)}
          >
            {sideList}
          </div>
        </Drawer>
      </div>
    );
  }
}

TemporaryDrawer.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(TemporaryDrawer);

提前致谢。

Answer 1

查看toggleDrawer组件

中的TemporaryDrawer方法

这种方法可以简单地“照亮”＃34;进入父组件ButtonAppBar

在class组件中更新了ButtonAppBar：

class ButtonAppBar extends Component {
    constructor(props) {
        super(props);

        this.state {
            isDrawerOpen: false
        }

        this.closeDrawer = this.closeDrawer.bind(this);
    }

    closeDrawer() {
        this.setState({ isDrawerOpen: false });
    }

    render() {
        const { classes } = props;
        return (
            <div className={classes.root}>
                <TemporaryDrawer open={this.state.isDrawerOpen} onDrawerClose={this.closeDrawer} />
                <AppBar position="static">
                    <Toolbar>
                        <IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
                            <MenuIcon />
                        </IconButton>
                        <Typography variant="title" color="inherit" className={classes.flex}></Typography>
                        <Button onClick={} color="inherit">User Name</Button>
                    </Toolbar>
                </AppBar>
            </div>
        );
    }
}

然后TemporaryDrawer组件可以是：

class TemporaryDrawer extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <Drawer open={this.props.isDrawerOpen} onClose={this.props.onDrawerClose}>
                ...
            </Drawer>
        )
    }
}

从React JS中的不同组件（File）调用方法

1 个答案: