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

我有一个两个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>

---

我希望，它在这里起作用。一旦你点击它，它就会打开。当它再次出现时，它将关闭。如何操作？

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

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>

handleDrawerToggle=（）=>{
const{open}=this.state
this.setState（{open:！open}）；
};

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

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>

handleDrawerToggle=（）=>{
const{open}=this.state
this.setState（{open:！open}）；
};

handleDrawerToggle=（）=>{
const open=this.state.open；
这是我的国家({
开门！开门
});
}

handleDrawerToggle=（）=>{
const open=this.state.open；
这是我的国家({
开门！开门
});
}

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

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>

---

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

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>