reactjs - 这在 Babel 编译的方法中是未定义的

Question

我正在尝试使用 React 0.13 和 ES6 语法编写一个小型 Web 应用程序。我使用 webpack 和 babel-loader 来编译:

loaders: [
  { test: /\.js/, exclude: /node_modules/, loader: "babel-loader"}
]

我在使用方法内部的 this 变量时遇到了问题，在我的代码中的多个地方出现“this is undefined”。例如:

export class PanelEditor extends React.Component {
  ...
  update (){
    if (!this.isMounted())
      return;

    this.setState(this.getStateFromStore());
  }
  ...
}

在这种情况下，this 变量永远不应该是未定义的。不过，我发现问题可能出在 Babel 重写代码的方式上:

update: {
  value: function update() {
    if (!this.isMounted()) {
      return;
    }
    this.setState(this.getStateFromStore());
  }
},

这样，在我看来，this 变量引用的是对象文字而不是类。我该如何解决这个问题？

Answer 1

这实际上不是问题。这是 this 未定义，因为您没有绑定(bind)更新函数。

您可以在构造函数或渲染中执行此操作。大多数人都是在渲染中完成的。

<div onClick={this.update.bind(this)} />

或者(我的偏好)，保留 this 的箭头函数。

<div onClick={() => this.update()} />