javascript - toggling boolean value in stateful component - Stack Overflow

admin管理员组

文章数量:1022516

I have a fairly simple stateful ponent whose value I wish to toggle whenever someone clicks on a button:

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;

Now, when I run my react App it throws an error saying:

sidedrawer is not defined in line 19

Can someone help me in fixing and understanding the error?

The line 18 - 19 happens to be this part in my code

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

I have a fairly simple stateful ponent whose value I wish to toggle whenever someone clicks on a button:

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;

Now, when I run my react App it throws an error saying:

sidedrawer is not defined in line 19

Can someone help me in fixing and understanding the error?

The line 18 - 19 happens to be this part in my code

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

• javascript
• reactjs

Share Improve this question Follow edited Jun 13, 2018 at 19:11 Tholle 113k2222 gold badges208208 silver badges197197 bronze badges asked Jun 13, 2018 at 18:57 AlwaysblueAlwaysblue 12k4444 gold badges141141 silver badges253253 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You have to get sidedrawer from your state:

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

Side drawer isn't defined, what is defined is this.state.sidedrawer, what you are seeking is

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

But this isn't the best way to setState, as explained on React docs, the best way to update state based on the previous state is using setState with a function that receives the prevState as a prop, you can try this instead

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

I have a fairly simple stateful ponent whose value I wish to toggle whenever someone clicks on a button:

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;

Now, when I run my react App it throws an error saying:

sidedrawer is not defined in line 19

Can someone help me in fixing and understanding the error?

The line 18 - 19 happens to be this part in my code

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

I have a fairly simple stateful ponent whose value I wish to toggle whenever someone clicks on a button:

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;

Now, when I run my react App it throws an error saying:

sidedrawer is not defined in line 19

Can someone help me in fixing and understanding the error?

The line 18 - 19 happens to be this part in my code

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

• javascript
• reactjs

Share Improve this question Follow edited Jun 13, 2018 at 19:11 Tholle 113k2222 gold badges208208 silver badges197197 bronze badges asked Jun 13, 2018 at 18:57 AlwaysblueAlwaysblue 12k4444 gold badges141141 silver badges253253 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You have to get sidedrawer from your state:

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

Side drawer isn't defined, what is defined is this.state.sidedrawer, what you are seeking is

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

But this isn't the best way to setState, as explained on React docs, the best way to update state based on the previous state is using setState with a function that receives the prevState as a prop, you can try this instead

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

本文标签： javascripttoggling boolean value in stateful componentStack Overflow