Question

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

exports.corsEnabledFunction = (req, res) => {
  // Set CORS headers
  // e.g. allow GETs from any origin with the Content-Type header
  // and cache preflight response for an 3600s
  res.set("Access-Control-Allow-Origin", "*");
  res.set("Access-Control-Allow-Methods", "GET");
  res.set("Access-Control-Allow-Headers", "Content-Type");
  res.set("Access-Control-Max-Age", "3600");
  // Send response to OPTIONS requests and terminate the function execution
  if (req.method == 'OPTIONS') {
    res.status(204).send('');
  }
  // Continue with function code
  ...
}

我的元素起作用，因此当您单击它时，会打开一个东西，因为仅添加了一个打开的事件：

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

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

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

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>

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

3 个答案: