使用箭头函数绑定react组件中的函数而不是绑定在构造函数中

Question

我总是做以下操作来绑定React组件中的函数

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

但是我一直在构造函数之外看到越来越多的箭头方法，如此

updateInput = () => ( code here )

但是当我在我的代码中尝试这个时，会抛出语法错误。为什么呢？

Answer 1

我相信你指的是这样的语法：

class MyClass {
    constructor() {

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

    }
}

将箭头函数声明为类定义的一部分是一个实验性功能，它不是javascript语言的标准部分，这就是您看到语法错误的原因。如果要使用此语法，可以使用Babel's transform-class-properties feature

如果您没有使用babel，那么您需要在构造函数中手动绑定该函数。

Answer 2

1. 您只想在类构造函数中使用.bind(this)。
2. 您要么使用this.updateInput或() => updateInput()
3. 如果您想使用this.updateInput，则必须在班级中将其定义为updateInput = () => ( code here )，然后在班级中将其用作onSomething={updateInput]。
4. 如果它抛出语法错误。当您在构造函数中绑定this时，您的事件处理程序已准备好执行某些操作。您所要做的就是eventHandler={this.updateInput}