如何使用箭头函数(公共类字段)作为类方法?

我是新使用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对象。

你的语法稍微偏离了,只是在属性名称后面缺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议


不,如果你想创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); } } 

问题是所有的答案都准备好了,但我会在这里添加一些用例来使用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 }); 

我知道这个问题已经得到了充分的回答,但是对于那些不想使用实验性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 }