材质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
希望这对您有帮助