Συρτάρι Αλλαγή Περιεχόμενο

ψήφοι
0

Πώς να αλλάξει το περιεχόμενο, όταν κάνετε κλικ σε διάφορα αντικείμενα. Έχω δύο διαφορετικά αρχεία (Home.js και Sidebar.js), στο Sidebar δηλώνω τα στοιχεία, αλλά στο σπίτι, έβαλα μερικά κουμπιά. Αλλά δεν ξέρω πώς να περάσει τις πληροφορίες που θέλετε να αλλάξετε μεταξύ των στοιχείων που αναφέρονται στο sidebar μου.

Είμαι χρησιμοποιώντας αυτό το παράδειγμα Συρτάρι ( 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'
}
Δημοσιεύθηκε 27/11/2018 στις 17:39
πηγή χρήστη
Σε άλλες γλώσσες...                            


1 απαντήσεις

ψήφοι
0

Πήρα έναν τρόπο για να το κάνει. Αλλά για κάθε πλήκτρο στο συρτάρι μου, εγώ πρέπει να δημιουργήσετε μια λειτουργία που βάζει έναν αριθμό σε αξία μου. Έχετε έναν τρόπο για να δηλώσει μία λειτουργία και ότι κάθε κουμπί στην τάξη μου σε μία σειρά με την αξία μου;

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);
Απαντήθηκε 28/11/2018 στις 18:48
πηγή χρήστη

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more