React Material-UI 状态未更新答案

【问题标题】：React Material-UI state not updatingReact Material-UI 状态未更新
【发布时间】：2016-10-31 05:35:50
【问题描述】：

我是 React 新手，正在尝试使用 Material UI 构建一个带有抽屉的简单 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

任何帮助将不胜感激！

【问题讨论】：

试试onLeftIconButtonTouchTap={this.handleToggle.bind(this)}
@jpopesculian nope...还是什么都没有
控制台有错误吗？
在发布我的答案之前没有看到此评论 - 抱歉！
@jpopesculian 不，完全没有错误。也使用 react 开发工具，这表明一切都很好

标签： javascript reactjs frontend material-ui

【解决方案1】：

为了让你的状态正确呈现，你需要做的就是将你的函数绑定到上下文。由于您使用的是 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>
          )
        }

我想这会解决你的问题。

【讨论】：

谢谢！但由于某种原因，箭头函数对我来说是一个 Browserify 错误。在构造函数中指定绑定或在调用函数时绑定似乎没有做任何事情......
令我惊讶的是，即使在绑定了您的开放状态之后，它也不会发生变异。不过它对我来说效果很好
我使用的 react-router 有问题吗？
解决了这个问题。我完全忘记了注入点击事件插件-.-，之后在构造函数中指定活页夹完全修复了它。谢谢！
乐于助人！ :) 。那么你可以使用任何一种绑定方法

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

在构造函数中绑定handleToggle函数如下： this.handleToggle=this.handleToggle.bind(this);

【讨论】：