Как отправить параметр в SwipeableDrawer материала пользовательского интерфейса в реагировать

Question

Это мой SwipeableDrawer материала-пользовательского интерфейса

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: 
 });
};

Iесть меню, подобное этому:

{this.state.dashboard}

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

Answer 1

Вы можете сделать это, добавив функцию onClick() к элементу List и 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-репозитории