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

但为什么呢？我是否需要明确地绑定所有内容（包括我因同样的原因无法工作的this.setState）？

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

Answer 1

当您使用箭头函数作为对象文字中属性的值时，与this的绑定就是函数声明范围的绑定，就像任何箭头函数一样。在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时不需要绑定任何成员函数，因为React会自动为您执行此操作，并且比Function.prototype.bind更有效。

感谢@loganfsmyth了解this为undefined的原因。

在React项目中，“this”转换为“undefined”

1 个答案: