Javascript 反应物料UI状态未更新

我是一个新手，尝试使用MaterialUI构建一个带有抽屉的简单AppBar

appbar和抽屉似乎实现正确，但由于某些原因，单击切换按钮时抽屉状态未更新

我在material ui和React中都遵循了引用，所以我不确定发生了什么。以下是组件的代码：

  import React, { Component } from 'react'
  import { Link } from 'react-router'
  import AppBar from 'material-ui/AppBar';
  import Drawer from 'material-ui/Drawer';
  import MenuItem from 'material-ui/MenuItem';



  class Appbar extends Component {

    constructor(props) {
        super(props);
        this.state = {open: false};
      }

      handleToggle () {
        this.setState({open: !this.state.open});
        }

      render() {
        return (
          <div>
          <AppBar
          title="Polism"
          onLeftIconButtonTouchTap={this.handleToggle}
          />
          <Drawer open={this.state.open}>
            <MenuItem>Menu Item</MenuItem>
            <MenuItem>Menu Item </MenuItem>
          </Drawer>
          </div>
          )
        }

      }

  export default Appbar

import React，{Component}来自“React”
从“反应路由器”导入{Link}
从“物料ui/AppBar”导入AppBar；
从“物料界面/抽屉”导入抽屉；
从“物料界面/菜单项”导入菜单项；
类Appbar扩展组件{
建造师（道具）{
超级（道具）；
this.state={open:false}；
}
手语（）{
this.setState（{open:！this.state.open}）；
}
render（）{
返回(
菜单项
菜单项
)
}
}
导出默认应用程序栏

---

任何帮助都将不胜感激

由于您的

handleToggle

函数依赖于该

函数的正确上下文，因此您需要在
渲染
函数中绑定它

onLeftIconButtonTouchTap={this.handleToggle.bind(this)}

由于
handleToggle
函数依赖于该
函数的正确上下文，因此需要将其绑定到
render
函数中

onLeftIconButtonTouchTap={this.handleToggle.bind(this)}

为了正确呈现状态，您需要做的就是将函数绑定到上下文。由于您使用的是ES6脚本，所以可以通过三种方式实现这两种功能

1） 使用箭头函数

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

2） 。在构造函数中指定绑定

constructor(props) {
        super(props);
        this.state = {open: false};
        this.handleToggle = this.handleToggle.bind(this);
      }

3） 调用函数时绑定

render() {
        return (
          <div>
          <AppBar
          title="Polism"
          onLeftIconButtonTouchTap={this.handleToggle.bind(this)}
          />
          <Drawer open={this.state.open}>
            <MenuItem>Menu Item</MenuItem>
            <MenuItem>Menu Item </MenuItem>
          </Drawer>
          </div>
          )
        }

render（）{
返回(
菜单项
菜单项
)
}

我认为这将解决您的问题。
为了正确呈现状态，您需要做的就是将函数绑定到上下文。由于您使用的是ES6脚本，所以可以通过三种方式实现这两种功能

1） 使用箭头函数

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

2） 。在构造函数中指定绑定

constructor(props) {
        super(props);
        this.state = {open: false};
        this.handleToggle = this.handleToggle.bind(this);
      }

3） 调用函数时绑定

render() {
        return (
          <div>
          <AppBar
          title="Polism"
          onLeftIconButtonTouchTap={this.handleToggle.bind(this)}
          />
          <Drawer open={this.state.open}>
            <MenuItem>Menu Item</MenuItem>
            <MenuItem>Menu Item </MenuItem>
          </Drawer>
          </div>
          )
        }

render（）{
返回(
菜单项
菜单项
)
}

我认为这将解决您的问题。
在构造函数中绑定handleToggle函数，如下所示：
this.handleToggle=this.handleToggle.bind（this）
在构造函数中绑定handleToggle函数，如下所示：
this.handleToggle=this.handleToggle.bind（this）

试试
onlefticonbuttonouchtap={this.handleToggle.bind（this）}
@jpopesculian no…仍然没有控制台中有任何错误吗？在发布我的答案之前没有看到此评论-抱歉@不，一点错误都没有。同样使用react-dev工具，这表明一切都应该很好尝试
onLeftIconButtonTouchTap={this.handleToggle.bind（this）}
@jpopesculian no…仍然没有控制台中有任何错误吗？在发布我的答案之前没有看到此评论-抱歉@不，一点错误都没有。还可以使用react-dev工具，这表明一切都应该很好，谢谢！但由于某些原因，箭头函数正在给我造成一个Browserify错误。在构造函数中指定绑定或在调用函数时指定绑定似乎没有任何作用……令我惊讶的是，即使在绑定之后，您的打开状态也没有发生变化。它对我来说工作得很好，我想这可能是我使用的react路由器的问题吗？解决了这个问题。我完全忘记了注入tap事件插件-。-，之后在构造函数中指定绑定器将其完全修复。非常感谢。很乐意帮忙！：）。好的，你可以选择任何一种装订方法谢谢！但由于某些原因，箭头函数正在给我造成一个Browserify错误。在构造函数中指定绑定或在调用函数时指定绑定似乎没有任何作用……令我惊讶的是，即使在绑定之后，您的打开状态也没有发生变化。它对我来说工作得很好，我想这可能是我使用的react路由器的问题吗？解决了这个问题。我完全忘记了注入tap事件插件-。-，之后在构造函数中指定绑定器将其完全修复。非常感谢。很乐意帮忙！：）。你可以选择任何一种绑定方法