如何在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}

如何将仪表板的值设置为等于“ Todo”？这就是我从列表中选择的。

Answer 1

您可以通过向List元素添加一个onClick()函数，并在此click函数中添加一个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 repository

中看到它