如何使用箭头函数（公共类字段）作为类方法？

Question

我是将ES6类与React结合使用的新手，以前我一直将我的方法绑定到当前对象（如第一个示例所示），但是ES6是否允许我将类函数永久地绑定到带有箭头的类实例上？（在作为回调函数传递时很有用。）当我尝试使用CoffeeScript尝试使用它们时，会出现错误：

class SomeClass extends React.Component {

  // Instead of this
  constructor(){
    this.handleInputChange = this.handleInputChange.bind(this)
  }

  // Can I somehow do this? Am i just getting the syntax wrong?
  handleInputChange (val) => {
    console.log('selectionMade: ', val);
  }

这样，如果我要传递SomeClass.handleInputChange给，例如setTimeout，它将仅限于类实例，而不是window对象。

Answer 1

您的语法略有不同，只是在属性名称后缺少等号。

class SomeClass extends React.Component {
  handleInputChange = (val) => {
    console.log('selectionMade: ', val);
  }
}

这是一项实验功能。您将需要在Babel中启用实验功能才能进行编译。这是一个启用实验的演示。

要在babel中使用实验性功能，您可以从此处安装相关的插件。对于此特定功能，您需要transform- class-properties插件：

{
  "plugins": [
    "transform-class-properties"
  ]
}

您可以在此处阅读有关“类字段和静态属性”提案的更多信息