リアクションではコンポーネントメソッドのみがバインドされます - 回避するには？

Question

反応0.14のES6を使用するときに定型記号を避ける方法はありますか？

は、今まで私が作成したComponentにバインドするために私の機能を心配する必要はありませんでしたが、それはもはやです（なぜ？！？）の場合とコンポーネントのみ（もしComponentスーパークラスに囲まれて私は正しくエラーを理解しました）。

だから私は本当に私は新しいクラスがコンストラクタにこのコードを追加することで作成するたびに何をする必要があるか：私はnewFunctionそれが失敗します（無小道具、状態または何かをバインドする文句を言わないのであれば

class CustomComp extends React.Component { 

    constructor() { 
    super(); 
    this.newFunction = this.newFunction.bind(this); 
    } 

    newFunction(){ 
    console.log('This is user defined function'); 

} 
    render() { 
    return <button onClick={this.newFunction}>Click</button> 
    } 
} 

を）。

これを回避する方法はありますか？ React documentationから

Answer 1

：

ませ自動バインド

方法は 彼らは自動的にインスタンスにこれを結合しないことを意味し、通常のES6クラスと同じセマンティクスに従ってください。 に.bind（this）または矢印関数=>を明示的に使用する必要があります。

したがって、0.14で新しく追加されたすべてのメソッドを自動的にバインドする方法はありません。ドキュメントが示唆するようにしかし、あなたがすることができますすることができます）

class CustomComp extends React.Component { 

    constructor() { 
    super(); 
    } 

    newFunction =() => { 
    console.log('This is user defined function'); 

} 
    render() { 
    return <button onClick={this.newFunction}>Click</button> 
    } 
} 

2：あなたはバベルを使用している場合

1）は、（ただし、矢印の機能を使用するには、ステージ0）を必要とします場所にをバインド：

class CustomComp extends React.Component { 

    constructor() { 
    super(); 
    } 

    newFunction() { 
    console.log('This is user defined function'); 

} 
    render() { 
    return <button onClick={this.newFunction.bind(this)}>Click</button> 
    } 
} 

3）あなたは、ARを使用することができます（結合するようなものである）場所の行機能：

class CustomComp extends React.Component { 

    constructor() { 
    super(); 
    } 

    newFunction() { 
    console.log('This is user defined function'); 

} 
    render() { 
    return <button onClick={() => this.newFunction()}>Click</button> 
    } 
} 

私はわずか1~2メソッドを持っている場合、数2 & 3を使用する傾向があります。 1番はいいですが、すべてのメソッド定義の構文を覚えておく必要があります。私がたくさんのメソッドを持っているなら、私はコンストラクターでバインドする傾向があります。