在React中切换事件单击（打开/关闭）

Question

我有两个React.js事件。 一个用来打开，另一个用来关闭。

handleDrawerOpen = () => {
  this.setState({ open: true });
};

handleDrawerClose = () => {
  this.setState({ open: false });
};

我的元素可以正常工作，因此当您单击它时，将打开一些内容，因为仅添加了一个打开事件：

  <IconButton
    color="inherit"
    aria-label="Open drawer"
    onClick={this.handleDrawerOpen}
    className={classNames(classes.menuButton)}
  >
    <MenuIcon />
  </IconButton>

我希望它在这里起作用。 单击它后，它将打开。 再次，它将关闭。 怎么做？

Answer 1

通过首先读取变量打开状态，然后将状态设置为相反的值，可以使按钮切换。 您可以在一个函数中执行以下操作：

handleDrawerToggle = () => {
  const { open } = this.state
  this.setState({ open: !open});
};

<IconButton
    color="inherit"
    aria-label="Open drawer"
    onClick={this.handleDrawerToggle }
    className={classNames(classes.menuButton)}
  >
    <MenuIcon />
  </IconButton>

Answer 2

handleDrawerToggle = () => { const open = this.state.open; this.setState({ open: !open }); }

Answer 3

我建议使用一个新功能来处理切换逻辑本身。 这种性质的东西：

handleDrawerToggle = () => {
   if(open) {
       this.setState({ open: false });
   } else {
       this.setState({ open: true });
   }
};

然后，您可以将新函数用作IconButton的事件处理程序：

<IconButton
    color="inherit"
    aria-label="Open drawer"
    onClick={this.handleDrawerToggle}
    className={classNames(classes.menuButton)}>
    <MenuIcon />
</IconButton>