Material ui 选择后ListItem能否保持高亮显示?
我想设置一个主视图/详细视图,左侧有一个Material ui 选择后ListItem能否保持高亮显示?,material-ui,Material Ui,我想设置一个主视图/详细视图,左侧有一个,右侧有一个 如何使最后选择的保持高亮显示 我用的是材料-ui@next您应该使用MenuItem而不是ListItem。如上所述: MenuItem是带有一些附加样式的ListItem的包装器 其中一个附加样式是selected选项,您可以使用selected属性设置该选项: <MenuItem button selected> <ListItemIcon> <FolderIcon /> </Li
,右侧有一个
如何使最后选择的
保持高亮显示
我用的是材料-ui@next您应该使用
MenuItem
而不是ListItem
。如上所述:
MenuItem
是带有一些附加样式的ListItem
的包装器
其中一个附加样式是selected
选项,您可以使用selected
属性设置该选项:
<MenuItem button selected>
<ListItemIcon>
<FolderIcon />
</ListItemIcon>
<ListItemText primary="Archives" />
</MenuItem>
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import List, { ListItemIcon, ListItemText } from 'material-ui/List';
import { MenuItem } from 'material-ui/Menu';
import InboxIcon from 'material-ui-icons/Inbox';
import DraftsIcon from 'material-ui-icons/Drafts';
import FolderIcon from 'material-ui-icons/Folder';
const styles = theme => ({
root: {
width: '100%',
maxWidth: 360,
backgroundColor: theme.palette.background.paper,
},
});
class SimpleList extends React.Component {
constructor(props) {
super(props);
this.state = { selected: null };
}
updateSelected(selectedIndex) {
this.setState({ selected: selectedIndex });
}
render() {
const { classes } = this.props;
const { selected } = this.state;
return (
<div className={classes.root}>
<List>
<MenuItem button onClick={() => this.updateSelected(0)} selected={selected === 0}>
<ListItemIcon>
<InboxIcon />
</ListItemIcon>
<ListItemText primary="Inbox" />
</MenuItem>
<MenuItem button onClick={() => this.updateSelected(1)} selected={selected === 1}>
<ListItemIcon>
<DraftsIcon />
</ListItemIcon>
<ListItemText primary="Drafts" />
</MenuItem>
<MenuItem button onClick={() => this.updateSelected(2)} selected={selected === 2}>
<ListItemIcon>
<FolderIcon />
</ListItemIcon>
<ListItemText primary="Archives" />
</MenuItem>
</List>
</div>
);
}
}
SimpleList.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(SimpleList);