javascript - 在有状态组件中切换布尔值

Question

我有一个相当简单的有状态组件，每当有人单击按钮时，我希望切换其值：

class Layout extends Component {
  state = {
    sidedrawer: false
  }

  sideDrawerCloseHandler = () => {
    this.setState({sidedrawer: false})
  }

  sideDrawerTogglerHandler = () => {
    this.setState({sidedrawer: !sidedrawer})
  }

  render () {
    return (
      <Aux>
        <Toolbar sideDrawerTogglerHandler={this.sideDrawerTogglerHandler}/>
        <SideDrawer SideDrawerOpen={this.state.sidedrawer} sideDrawerCloseHandler={this.sideDrawerCloseHandler} />
        <main className={classes.co}>
          {this.props.children}
        </main>
      </Aux>
    )
  }
}

export default Layout;

现在，当我运行我的 react 应用程序时，它会抛出一个错误：

sidedrawer没有在第 19 行定义

有人可以帮助我修复和理解错误吗？

第 18 - 19 行恰好是我代码中的这一部分

sideDrawerTogglerHandler = () => {
  this.setState({sidedrawer: !sidedrawer})
}

标签： javascriptreactjs

Answer 1

您必须sidedrawer从您所在的州获得：

sideDrawerTogglerHandler = () => {
 this.setState((previousState) => {
   return {sidedrawer: !previousState.sidedrawer}
 })
}