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

但為什么？ 我是否需要顯式綁定所有事物（包括this.setState相同原因而無法使用的this.setState ）？

我正在使用帶有Webpack 1.12.2和babel-loader 5.3.2的react 0.13.3。 以前沒有遇到過這樣的問題。

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 。