javascript - React Material-UI 状态未更新

Question

我是 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

任何帮助将不胜感激!

Answer 1

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

1) 使用箭头函数

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

2).在构造函数中指定绑定(bind)

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

3)调用函数时绑定(bind)

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>
          )
        }

我认为这可以解决您的问题。