Es6 React Arrow函数行为

Question

I'm trying to get into React using Borwserify, Watchify, Babelfiy (with ES2015 preset).

Could anyone please explain, why this is working...

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>
    )
}

and this code isn't (arrow function outside constructor)...

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>
    )
}

The last one gives me an error, that is:

Unexpected token (18:17)

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

All I can find on the Internet tells me, that both syntaxes should work, but they don't. this happens with the ES2015 babel preset set correctly (proof by compiling version one without an issue).

What am I missing? Why can't I have an arrow function outside the constructor (or probably any other "regular" function in the class)?

Any help will be appreciated! Thank you!

Answer 1

In ES6 / ES2015 you can't have arrow functions as a class method.

Define handleChange as normal method.

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

Bind handleChange with this in the constructor function

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

Answer 2

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

Answer 3

if you want to use ES7 features, you need the babel plugin

transform-class-properties( you need this one for arrow functions)

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

and you config webpack something else like this

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