Es6 React 箭头函数行为答案

【问题标题】：Es6 React Arrow function behaviourEs6 React 箭头函数行为
【发布时间】：2016-02-07 17:39:21
【问题描述】：

我正在尝试使用 Borwserify、Watchify、Babelfiy（预设 ES2015）进入 React。

谁能解释一下，为什么这是有效的......

export default class HelloWorld extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        username: 'Tyler McGinnis'
    }

    this.handleChange = (e) => {
        this.setState({username: e.target.value})
    };


}

render() {

    return (
        <div>
            Hello {this.state.username} <br />
            Change Name: <input type="text" value={this.state.username} onChange={this.handleChange} />
        </div>
    )
}

而这段代码不是（构造函数外的箭头函数）...

export default class HelloWorld extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        username: 'Tyler McGinnis'
    }
}


handleChange = (e) => {
   this.setState({username: e.target.value})
};

render() {

    return (
        <div>
            Hello {this.state.username} <br />
            Change Name: <input type="text" value={this.state.username} onChange={this.handleChange} />
        </div>
    )
}

最后一个给我报错，就是：

Unexpected token (18:17)

handleChange = ((e) => {
            ^
       this.setState({username: e.target.value})
} );

我在 Internet 上找到的所有信息都告诉我，这两种语法都应该可以工作，但它们不能。这发生在正确设置 ES2015 babel 预设的情况下（通过编译第一版没有问题来证明）。

我错过了什么？为什么我不能在构造函数之外有一个箭头函数（或者可能是类中的任何其他“常规”函数）？

任何帮助将不胜感激！谢谢！

【问题讨论】：

因为这是 ES7 提议的扩展。此语法在 ES6 中不起作用，您的编译器是正确的。
在 es6 中不能将箭头函数作为类方法
哇，真快。谢谢你俩！是否有偶然的 babel 的 es7 预设...？还是我应该离开它？
babeljs.io/docs/plugins/preset-stage-1

标签： javascript reactjs ecmascript-6 browserify arrow-functions

【解决方案1】：

在 ES6 / ES2015 中，您不能将箭头函数作为类方法。

将handleChange定义为普通方法。

handleChange(e){
   this.setState({username: e.target.value});
}

在构造函数中用this绑定handleChange

constructor() {
    this.handleChange = this.handleChange.bind(this);
}

【讨论】：

我认为这在 ES7 或实验版本中是允许的。不确定。

【解决方案2】：

这是一个名为 Class properties transform 的 ES7 阶段 1 功能，您可以安装 babel-preset-stage-1 或使用插件 transform-class-properties 使其工作。

【讨论】：

【解决方案3】：

如果你想使用 ES7 的特性，你需要 babel 插件

transform-class-properties（箭头函数需要这个）

yarn add babel-plugin-transform-class-properties --dev
yarn add babel-plugin-transform-object-rest-spread --dev

然后你配置 webpack 类似的东西

.configureBabel(function(babelConfig) {
        babelConfig.plugins = ["transform-object-rest-spread","transform-class-properties"]
    })

【讨论】：