Es6反应箭头功能行为
我正在尝试使用borwserify，watchify，babelfiy进行反应（使用es2015预设）。
可以请任何人解释，为什么这是工作：
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>
)
}
虽然这不是（箭头功能外部的constrcutor）
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})
} );
我可以在互联网上找到告诉我，这两种语法应该工作，但他们不。 这发生在es2015 babel预设设置正确的情况下（通过编译版本1来证明没有问题）。
我错过了什么？ 为什么我不能在构造函数外部使用箭头函数（或者在类中可以使用其他任何“常规”函数）？ 任何帮助感谢！
在ES6 / ES2015中，您不能将箭头函数作为类方法。
按常规方法定义handleChange。
handleChange(e){
this.setState({username: e.target.value});
}
在构造函数中绑定handleChange
constructor() {
this.handleChange = this.handleChange.bind(this);
}
这是一个名为Class properties transform的ES7 stage-1特性，您可以安装babel-preset-stage-1或使用插件transform-class-properties使其工作。