我是該框架的新手,我的目標(biāo)是當(dāng)我單擊側(cè)欄中的菜單項(xiàng)之一時(shí)顯示顏色。如果我們單擊表格組件,則表格名稱和圖標(biāo)應(yīng)變?yōu)榘咨?。誰(shuí)能幫助我如何在單擊菜單項(xiàng)時(shí)更改顏色?這是代碼: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貢獻(xiàn)1725條經(jīng)驗(yàn) 獲得超8個(gè)贊
實(shí)現(xiàn):?jiǎn)螕暨x項(xiàng)卡時(shí):
將背景更改為灰色
將圖標(biāo)更改為白色
根據(jù)設(shè)置條件樣式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 關(guān)注
- 170 瀏覽
添加回答
舉報(bào)
0/150
提交
取消