使用箭头功能绑定在功能反应组件，而不是绑定在构造

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

回答