在作出反应工程 “这个” 转换为 “不确定”

一个非常简单的代码在作出反应工程 “这个” 转换为 “不确定”

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。之前没有遇到过这样的问题。

来源

2015-10-04 Rishat Muhametshin

当您使用箭头函数作为对象文本中属性的值时，与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作为阵营将自动为您做到这一点，在比Function.prototype.bind更有效的方法时，绑定任何成员函数。

谢谢@loganfsmyth关于为什么this是undefined的更新。

来源

2015-10-04 20:06:25 lukewestby

这实际上并不是严格的模式，在这种情况下会导致'undefined'。 Babel将所有东西都解析为ES6模块，而ES6模块中的“this”在规范中显式为“未定义”。 – loganfsmyth

@loganfsmyth在模块代码中'this'不是定义为'undefined'，因为规范将其定义为严格模式？ https://people.mozilla.org/~jorendorff/es6-draft.html#sec-strict-mode-code – lukewestby

@lukewestby你现在可以参考最终规范:) – JMM

在作出反应工程 “这个” 转换为 “不确定”

回答

相关问题