javascript - 在React项目中， "this"转换为 "undefined"

Question

非常简单的代码

var App = React.createClass({
    handleForm: (e) => {
        e.preventDefault();
    },
    render: () => {
        return (
            <form>
                <button type="submit" onClick={this.handleForm}>Go</button>
            </form>
        );
    }
});

转换为

// ...
_react2['default'].createElement(
    'button',
    { type: 'submit', onClick: undefined.handleFormSubmit },
    'Go'
)

但是为什么呢？我是否需要显式绑定(bind)所有内容(包括 this.setState ，由于同样的原因我无法工作)？

我正在使用 React 0.13.3 和 webpack 1.12.2 和 babel-loader 5.3.2。以前没有遇到过这样的问题。

Answer 1

当您使用箭头函数作为对象字面量中的属性值时，与任何箭头函数一样，与 this 的绑定(bind)是函数声明范围的绑定(bind)。在 ES6 模块代码中，最外层上下文中的 this 值被定义为 undefined，因此 Babel 只是内联该值。你想做的是这样的:

var App = React.createClass({
  handleForm(e) {
    e.preventDefault();
  },
  render() {
    return (
        <form>
            <button type="submit" onClick={this.handleForm}>Go</button>
        </form>
    );
  }
});

最后一点，使用 React.createClass 时，您不需要绑定(bind)任何成员函数，因为 React 会自动为您执行此操作，并且比使用 Function 更有效。原型(prototype).bind.

感谢@loganfsmyth 更新了this 为何未定义。