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

一尘不染

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

javascript

我不熟悉将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对象。

阅读 353

2020-04-25

共1个答案

一尘不染

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

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

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

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

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

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

2020-04-25