javascript - 如何在reactjs中材质ui的SwipeableDrawer中发送参数

Question

这是我的 Material-ui 的 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: 
 });
};

我有一个这样的菜单：

{this.state.dashboard}

如何将仪表板的值设置为等于“待办事项”？因为那是我从列表中选择的。

Answer 1

您可以通过向onClick()List 元素添加一个函数，并setState在此 click 函数中添加一个函数来更改组件的状态，如下所示：

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 存储库中看到它