javascript - Es6 React 箭头功能行为

Question

我正在尝试使用 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 预设设置正确的情况下(通过编译版本 1 证明没有问题)。

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

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

Answer 1

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

将 handleChange 定义为普通方法。

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

在构造函数中用this绑定(bind)handleChange

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