使用箭頭功能綁定在功能反應組件，而不是綁定在構造

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

綁定功能的，但我已經看到越來越更多的箭頭方法外構造如此

updateInput =() => (code here)

但是，當我在我的代碼中嘗試這個引發語法錯誤。爲什麼？

2017-09-23 Jstuff

*「但是當我在我的代碼中嘗試這個時，它會拋出語法錯誤」*。顯示一個例子，你如何使用它 –

標記爲@ Traktor53提到的重複。 –

我相信你指的是語法是這樣的：

class MyClass { 
    constructor() { 

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

    } 
}

聲明箭頭作爲類定義的一部分，是一個實驗性的功能，這不是一個標準的一部分的JavaScript語言，這就是爲什麼你看到一個語法錯誤。如果你想使用這種語法，你可以使用Babel's transform-class-properties feature

如果你不使用babel，那麼你需要手動綁定你的構造函數。

2017-09-23 02:15:07

在你看來，在React中解決這個問題的最好方法是什麼？我接受了一次採訪，被問及爲什麼我會使用'.bind（this）'而不是一個箭頭函數。 – Jstuff

在構造函數中執行'.bind（this）'與在構造函數中創建箭頭函數，vs使用babel使用上述特殊語法之間的區別在我看來是可以忽略的。他們都用不同的語法來做基本相同的事情，所以選擇主要取決於你和你的團隊最容易理解的地方。對於它的價值，反應網站上的大多數例子都使用'.bind（this）' –

你確實需要確定的一件事是，無論你使用什麼方法，你都要在構造函數（或者babel方式，它在構造函數中進行轉換）。這樣，對於每個類的實例來說，它只會執行一次。如果您多次進行綁定（比如說，在每次呈現調用時），那麼您可能會對性能產生影響。 –

您只想在類構造函數中使用.bind(this)。
要麼你想使用this.updateInput或() => updateInput()
如果你想使用this.updateInput你在你的類來定義它像updateInput =() => (code here)然後用它作爲你的類onSomething={updateInput]。
如果它引發語法錯誤。當您在構造函數中綁定this時，您的事件處理程序已準備好執行一些操作。所有您需要做的就是eventHandler={this.updateInput}

2017-09-23 01:53:51 Michal

回答