Блог

Это мой SwipeableDrawer из material-ui

 const sideList = (
</List>
  <ListItem button component={Link} to="/todos">
    <ListItemText primary="Todos" />
  </ListItem>
</List>
)
  

 <SwipeableDrawer
  open={this.state.left}
  onClose={this.toggleDrawer('left', false)}
  onOpen={this.toggleDrawer('left', true)}
>
<div tabIndex={0}
  onClick={this.toggleDrawer('left', false)}
  {sideList}
</div>
</SwipeableDrawer>
  

Мне нужно установить dashboard значение здесь на основе списка, который я выбираю ‘

 toggleDrawer = (side, open) => () => {
 this.setState({
    [side]: open,
    dashboard: 
 });
};
  

У меня есть такое меню:

 {this.state.dashboard}
  

Как мне установить значение dashboard равным ‘Todo’? Поскольку это то, что я выбрал из списка.

Вы могли бы сделать это, добавив onClick() функцию в элемент списка и setState в эту функцию щелчка, чтобы она изменяла состояние вашего компонента, например:

 state = {
  left: false,
  dashboard: 'none_yet',
};
  

 changeDashboardState = (dashboardValue) => {
  this.setState({
    dashboard: dashboardValue,
  }) 
}
  

 <List>
  {["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => (
    <ListItem button key={text} onClick={() => this.changeDashboardState(text)}>
      <ListItemText primary={text} />
    </ListItem>
  ))}
</List>
  

Таким образом, вы сможете изменить состояние, щелкнув в любом элементе списка. Также я реализовал его для тестирования, вы можете увидеть его в этом репозитории git