Question

单击其他项目时如何更改内容。我有两个不同的存档（Home.js和Sidebar.js），在补充工具栏中声明了这些项目，但是在Home中放置了一些按钮。但是我不知道如何在侧边栏中列出的项目之间传递要更改的信息。

我正在使用这个抽屉示例（https://material-ui.com/demos/drawers/#persistent-drawer）。

在我的app.js中，

import React, { Component } from 'react';
import Footer from './componets/Footer';
import Home from './componets/Home';
import store from './store'
import { Provider } from 'react-redux';
class App extends Component {
    render() {
        return (
          <Provider store={store}>
            <div className="content">

              <Drawer/> 

              <Home/>

              <Footer/>
            </div>
          </Provider>
        );
    }
}
export default App;

在我的CSS文件中：

.conteudo{
  display: grid;
  grid-template-areas: 
    'home home home home'
    'home home home home'
    'footer footer footer footer'
}

Answer 1

我有办法做到。但是，对于抽屉中的每个按钮，我都需要创建一个函数，该函数将数字放入我的值中。有一种方法可以声明一个函数，并且类中的每个按钮都将一个数字传递给我的值？

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { withStyles } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
import CssBaseline from '@material-ui/core/CssBaseline';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import List from '@material-ui/core/List';
import Typography from '@material-ui/core/Typography';
import Divider from '@material-ui/core/Divider';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';

import Button from '@material-ui/core/Button'

import HomeIcon from '@material-ui/icons/Home'
import MeetingRoomIcon from '@material-ui/icons/MeetingRoom'


const drawerWidth = 240;

function Conteudo(props){
    return(
        <Typography component='div'>
        {props.children}
        </Typography>
    )
}

Conteudo.propTypes ={
    children: PropTypes.node.isRequired,
};

const styles = theme => ({
  root: {
    display: 'flex',
  },
  appBar: {
    transition: theme.transitions.create(['margin', 'width'], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
  },
  appBarShift: {
    width: `calc(100% - ${drawerWidth}px)`,
    marginLeft: drawerWidth,
    transition: theme.transitions.create(['margin', 'width'], {
      easing: theme.transitions.easing.easeOut,
      duration: theme.transitions.duration.enteringScreen,
    }),
  },
  menuButton: {
    marginLeft: 12,
    marginRight: 20,
  },
  hide: {
    display: 'none',
  },
  drawer: {
    width: drawerWidth,
    flexShrink: 0,
  },
  drawerPaper: {
    width: drawerWidth,
  },
  drawerHeader: {
    display: 'flex',
    alignItems: 'center',
    padding: '0 8px',
    ...theme.mixins.toolbar,
    justifyContent: 'flex-end',
  },
  content: {
    flexGrow: 1,
    padding: theme.spacing.unit * 3,
    transition: theme.transitions.create('margin', {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
    marginLeft: -drawerWidth,
  },
  contentShift: {
    transition: theme.transitions.create('margin', {
      easing: theme.transitions.easing.easeOut,
      duration: theme.transitions.duration.enteringScreen,
    }),
    marginLeft: 0,
  },
});

class PersistentDrawerLeft extends React.Component {
  state = {
    open: false,
    value: 0
  };

  handleDrawerOpen = () => {
    this.setState({ open: true });
  };

  handleDrawerClose = () => {
    this.setState({ open: false });
  };

  checkEvent = () => {
    this.setState({value : 1})
    console.log({value : 1})
  }

  checkEvent1 = () => {
    this.setState({value : 0})
    console.log({value : 0})
  }

  handleChange = (event, value) => {
      this.setState({ value })
      console.log(value)
  }
  render() {
    const { classes, theme } = this.props;
    const { open } = this.state;
    const { value } = this.state;

    return (
      <div className={classes.root}>
        <CssBaseline />
        <AppBar
          position="fixed"
          className={classNames(classes.appBar, {
            [classes.appBarShift]: open,
          })}
        >
          <Toolbar disableGutters={!open}>
            <IconButton
              color="inherit"
              aria-label="Open drawer"
              onClick={this.handleDrawerOpen}
              className={classNames(classes.menuButton, open && classes.hide)}
            >
              <MenuIcon />
            </IconButton>
            <Typography variant="h6" color="inherit" noWrap>
              Drawer
            </Typography>
          </Toolbar>
          </AppBar>
        <Drawer
          value ={value}
          className={classes.drawer}
          variant="persistent"
          anchor="left"
          open={open}
          classes={{
            paper: classes.drawerPaper,
          }}
        >
          <div className={classes.drawerHeader}>
            <IconButton onClick={this.handleDrawerClose}>
               <ChevronLeftIcon />
            </IconButton>
          </div>
          <Divider />
          <List>

            <ListItem button onClick={this.checkEvent1} onChange={this.handleChange}>
                <ListItemIcon>
                    <HomeIcon/>
                </ListItemIcon>
                <ListItemText primary='Central'/>
            </ListItem>

            <ListItem button onClick={this.checkEvent} onChange={this.handleChange}>
                <ListItemIcon>
                    <MeetingRoomIcon/>
                </ListItemIcon>
                <ListItemText primary='BedRoom'/>
            </ListItem>

          </List>
          <Divider />
        </Drawer>
        <main
          className={classNames(classes.content, {
            [classes.contentShift]: open,
          })}
        >
          <div className={classes.drawerHeader} onChange={this.handleChange}/>
        {value === 0 && <Conteudo> <Button variant="contained" color="primary">Default</Button> </Conteudo>}
        {value === 1 && <Conteudo><Button variant="contained" color="secondary">Default</Button> </Conteudo>}
        {value === 2 && <Conteudo><Button variant="contained" color="danger">Default</Button> </Conteudo>}
        </main>

      </div>
    );
  }
}

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

export default withStyles(styles, { withTheme: true })(PersistentDrawerLeft);

抽屉内容更改

1 个答案: