В React проект, "этот" превращается в "неопределенном"

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 значение в самом внешнем контексте определено как 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.