我是該框架的新手,我的目標是當我單擊側欄中的菜單項之一時顯示顏色。如果我們單擊表格組件,則表格名稱和圖標應變為白色。誰能幫助我如何在單擊菜單項時更改顏色?這是代碼:class Sidebar extends React.Component { constructor(props) { super(props); this.state = { selectedIndex: 0 }; } handleListItemClick = (event, index) => { this.setState({ selectedIndex: index }); }; render() { const { className, classes, onSidebarOpen, ...rest } = this.props; return ( <div className={classes.root}> <Drawer className={classes.drawer} variant="permanent" classes={{ paper: classes.drawerPaper }} > <div className={classes.toolbar} /> <List> {["table", "organisation"].map((item, index) => { const Icon = itemsConfig[item].icon; return ( <ListItem component={Link} to={itemsConfig[item].link} selected={index === this.state.selectedIndex} onClick={event => this.handleListItemClick(event, index)} button key={item} > <ListItemIcon> <Icon /> </ListItemIcon> <ListItemText primary={itemsConfig[item].text} /> </ListItem> ); })} </List> </Drawer> </div> ); }}export default withStyles(styles)(Sidebar);
1 回答

qq_遁去的一_1
TA貢獻1725條經驗 獲得超8個贊
實現:單擊選項卡時:
將背景更改為灰色
將圖標更改為白色
根據設置條件樣式the state of the selected index就可以了。
<ListItem
? ...
? style={
? ? selectedIndex === index ? { backgroundColor: "grey" } : {}
? }
>
? <ListItemIcon>
? ? <Icon
? ? ? style={selectedIndex === index ? { color: "white" } : {}}
? ? />
? </ListItemIcon>
? <ListItemText primary={itemsConfig[item].text} />
</ListItem>
- 1 回答
- 0 關注
- 172 瀏覽
添加回答
舉報
0/150
提交
取消