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

我是新使用React的ES6类，以前我一直在绑定我的方法到当前对象（在第一个例子中显示），但是ES6允许我永久地将一个类的函数绑定到带有箭头的类实例吗？ （作为callback函数传递时很有用。）当我尝试像使用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

你的语法稍微偏离了，只是在属性名称后面缺less了一个等号。

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

这是一个实验性function。 你需要在Babel中启用实验function才能编译。 这是一个启用了实验的演示。

要在babel中使用实验性function，您可以从这里安装相关的插件。 对于这个特定的function，你需要transform-class-properties插件 ：

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

您可以在这里阅读更多关于类字段和静态属性的build议

---

Answer 2

不，如果你想创build绑定，特定于实例的方法，你将不得不在构造函数中这样做。 但是，您可以使用箭头函数，而不是在原型方法上使用.bind ：

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

有一个build议 ，可以让你省略constructor()并直接把作业放在具有相同function的类作用域中，但我不会推荐使用它，因为它是高度实验性的。

或者，您可以使用.bind ，它允许您在原型上声明该方法，然后将其绑定到构造函数中的实例。 这种方法具有更大的灵活性，因为它允许从课堂外修改方法。

 class SomeClass extends React.Component { constructor() { super(); this.handleInputChange = this.handleInputChange.bind(this); … } handleInputChange(val) { console.log('selectionMade: ', val, this); } } 

Answer 3

问题是所有的答案都准备好了，但我会在这里添加一些用例来使用ES6 箭头方法。

里面的callback方法：

 let arr = [1,2]; let arr1 = arr.map((val,index) => { return val * 2; }); 

要么，

 let arr1 = arr.map(val => { // if one argument then no need of using () return val * 2; }); 

注意：在内部callback函数中，如果使用了this那么这里指的是callback函数而不是组件类。

例如：

 arr.map(function(val) { this.func(val); // Will not work }); arr.map((val,index)=>{ this.func(); // Will work }); 

Answer 4

我知道这个问题已经得到了充分的回答，但是对于那些不想使用实验性function的人来说，我只做了一点小小的贡献。 由于必须在构造函数中绑定多个函数绑定并使其看起来很乱，所以我想出了一个实用方法，一旦在构造函数中绑定和调用，就会自动为您执行所有必要的方法绑定。

假设我有这个类的构造函数：

 //src/components/PetEditor.jsx import React from 'react'; class PetEditor extends React.Component { constructor(props){ super(props); this.state = props.currentPet || {tags:[], photoUrls: []}; this.tagInput = null; this.htmlNode = null; this.removeTag = this.removeTag.bind(this); this.handleChange = this.handleChange.bind(this); this.modifyState = this.modifyState.bind(this); this.handleKeyUp = this.handleKeyUp.bind(this); this.addTag = this.addTag.bind(this); this.removeTag = this.removeTag.bind(this); this.savePet = this.savePet.bind(this); this.addPhotoInput = this.addPhotoInput.bind(this); this.handleSelect = this.handleSelect.bind(this); } ...//actual method declarations omitted }