ES6 React 组件中箭头函数可以永久绑定类方法吗？

在 ES6 中使用箭头函数作为类方法

在使用 ES6 类开发 React 应用程序时，将方法绑定到当前对象是过去的常见做法。但是，箭头函数可以用于将类函数永久绑定到实例，特别是对于回调函数吗？

尝试箭头函数语法

以前，人们会使用以下语法绑定方法：

class SomeClass extends React.Component {
  constructor(){
    this.handleInputChange = this.handleInputChange.bind(this)
  }
}

尝试使用箭头函数代替：

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

结果错误。

正确语法

使用箭头函数作为类方法的语法略有不同。属性名称后面需要一个等号：

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

启用实验性功能

此功能是实验性的，需要transform-class-properties Babel 插件来编译：

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

通过安装插件npm:

npm install --save-dev babel-plugin-transform-class-properties

用法

启用实验性功能后，传递 SomeClass.handleInputChange 作为回调函数将作用于类实例，而不是窗口对象。

有关更多信息，请参阅类字段和静态属性的提案。

以上是ES6 React 组件中箭头函数可以永久绑定类方法吗？的详细内容。更多信息请关注PHP中文网其他相关文章！