材质UI抽屉选择如何布线?

问题描述:

我试图使用Material UI React抽屉,但是对如何实现选择感到困惑,以便对组件进行更改.例如,我有一个名为获取视频"的选择,该选择应调用我的组件,该组件对A3进行AXIOS调用以获取存储桶中的文件.

I am trying to use the Material UI React drawer but getting confused on how to implement the selection so that a change is made to a component. For example, I have a selection called Get Videos that should call up my component that does an AXIOS call to S3 to get the files in the buckets.

如何使组件打开我的选择?我应该使用路由还是应该将组件的状态设置为活动"?任何帮助将不胜感激..

How do I make the component switch on my selection? Should I use a route or should I set the state of the component to "active"? Any help would be appreciated..

某些代码

handleClick(event) {
  ????
}

render() {
    return (
        <div>
            <ListItem button>
                <ListItemIcon>
                    <ScheduleIcon/>
                </ListItemIcon>
                <ListItemText primary="Scheduler" onClick={this.handleClick.bind(this)}/>
            </ListItem>
            <ListItem button onClick={this.handleClick()}>
                <ListItemIcon>
                    <ViewListIcon/>
                </ListItemIcon>
                <ListItemText primary="Watch Saved Recordings"/>
            </ListItem>
        </div>
    );
}

假设您知道如何使用react-router-dom.如果不使用链接来查找很好的指南.

Assuming that you know how to use react-router-dom. if don't use this link to find a good guide.

这是将反应路由与边栏一起使用的示例:

here is an example of using react routing with a sidebar:

import React, { Component } from 'react';
import { ListItemIcon, ListItemText, Divider, IconButton, MenuList, MenuItem, Drawer } from '@material-ui/core';
import { Link, withRouter } from 'react-router-dom';
import { withStyles } from '@material-ui/core/styles';
import PropTypes from 'prop-types';

import routes from '../routes/routes';

export class Sidebar extends Component {
  constructor(props) {
    super(props);

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

  activeRoute(routeName) {
    return this.props.location.pathname.indexOf(routeName) > -1 ? true : false;
  }

  render() {
    const { classes, theme } = this.props;
    return (
      <div>
        <Drawer
          variant="permanent"
        >
          <MenuList>
            {routes.map((prop, key) => {
              return (
                <Link to={prop.path} style={{ textDecoration: 'none' }} key={key}>
                  <MenuItem selected={this.activeRoute(prop.path)}>
                    <ListItemIcon>
                      <prop.icon />
                    </ListItemIcon>
                    <ListItemText primary={prop.sidebarName} />
                  </MenuItem>
                </Link>
              );
            })}
          </MenuList>
        </Drawer>
      </div>
    );
  }
}

export default withRouter(Sidebar);

,您的路由器文件应如下所示:

and your router file should look like this:

import { Home, ContentPaste, Notifications, AccountCircle } from '@material-ui/icons';
import HomePage from '../pages/Home/HomePage';
import ProfilePage from '../pages/Profile/ProfilePage';

const Routes = [
  {
    path: '/dashboard/home',
    sidebarName: 'Home',
    navbarName: 'Home',
    icon: Home,
    component: HomePage
  },
  {
    path: '/dashboard/profile',
    sidebarName: 'Profile',
    navbarName: 'Profile',
    icon: AccountCircle,
    component: ProfilePage
  }
];

export default Routes;

使用activeRoute可以突出显示当前路线

with activeRoute you can highlight the current route

希望这对您有帮助