2017-09-23 1 views
0

で代わりにバインドのコンポーネントを反応させ、私はいつもリアクトコンポーネントはコンストラクタ

this.updateInput = this.updateInput.bind(this); 

に機能のこれをバインドするために次のことをやったが、私はより多くのを見てきたし、そう

updateInput =() => (code here) 

のようなコンストラクタ外に矢印方法のより多くが、私は私のコードでこれをしようとすると、それは構文エラーがスローされます。どうして?

+1

* "私のコードでこれを試してみると、構文エラー" *がスローされます。あなたがそれを使用している例を示してください –

+0

@ Traktor53と同じように重複して旗がついています。 –

答えて

2

ですjavascript言語のため、構文エラーが表示されます。この構文を使用する場合は、Babel's transform-class-properties feature

を使用できます。babelを使用していない場合は、コンストラクタ内で関数を手動でバインドする必要があります。

+0

あなたの意見では、この問題にReactで接近する最善の方法は何ですか?私はインタビューを受け、なぜ矢の機能ではなく「.bind(this)」を使ったのかと聞かれました。 – Jstuff

+0

コンストラクタで '.bind(this)'を実行してからコンストラクタに矢印関数を作成することと、上記の特殊な構文を使用するためにbabelを使用することとの違いは、私の意見では間違いです。彼らはすべて構文が異なるだけで本質的に同じことをしているので、あなたとあなたのチームが最も理解しやすい選択肢がほとんどです。それが価値あるものであれば、反応ウェブサイトの例のほとんどは '.bind(this)'を使用しています –

+0

あなたが使用しているアプローチが何であれ、コンストラクタ(またはベルベルそれはコンストラクタでそれを行うことに変わります)。そうすれば、クラスの各インスタンスに対して1回だけ実行されます。バインディングを複数回(たとえば、すべてのレンダー呼び出しで)実行している場合は、パフォーマンスに影響を与える可能性があります。 –

0
  1. クラスコンストラクタでのみ.bind(this)を使用します。
  2. あなたはどちらかは、あなたがthis.updateInputを使用する場合は、あなたのクラスでonSomething={updateInput]としてそれを使用するあなたのクラスでupdateInput =() => (code here)ようにそれを定義する必要がありthis.updateInputまたは() => updateInput()
  3. を使用します。
  4. 構文エラーが発生した場合。 thisをコンストラクタにバインドすると、イベントハンドラは何らかの処理を行う準備が整います。クラス定義の一部は、標準の一部ではない実験的な機能であると

    class MyClass { 
        constructor() { 
    
        } 
        myBoundFunction =() => { //<--- this line inside of a class 
    
        } 
    } 
    

    は矢印の関数を宣言:あなたがしなければならないのは、私はあなたがこのような構文を参照していると信じてeventHandler={this.updateInput}

関連する問題