2

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

インターネットで見つけることができるのは、両方の構文が機能するはずですが、機能しないことだけです。これは、ES2015 の babel プリセットが正しく設定されている場合に発生します (問題なくバージョン 1 をコンパイルすることで証明されます)。

私は何が欠けていますか？コンストラクター (またはおそらくクラス内の他の「通常の」関数) の外にアロー関数を使用できないのはなぜですか?

どんな助けでも大歓迎です！ありがとうございました！

4

3 に答える 3

2

これはClass properties transformと呼ばれる ES7 ステージ 1 機能でbabel-preset-stage-1、プラグインをインストールまたは使用しtransform-class-propertiesて機能させることができます。

于 2016-05-04T04:40:27.180 に答える
2

ES6 / ES2015 では、アロー関数をクラス メソッドとして持つことはできません。

通常の方法で handleChange を定義します。

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

コンストラクター関数で handleChange を this にバインドします

constructor() {
    this.handleChange = this.handleChange.bind(this);
}
于 2016-02-07T20:53:09.307 に答える