如何使用箭头函数(公共类字段)作为类方法？
我刚开始在React中使用ES6类，之前我已经将我的方法绑定到当前对象(如第一个示例所示)，但是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对象。
回答 3
Stack Overflow用户
发布于 2015-07-12 21:54:55
不，如果您想创建绑定的、特定于实例的方法，则必须在构造函数中执行此操作。但是，您可以使用箭头函数，而不是在原型方法上使用.bind：
class SomeClass extends React.Component {
constructor() {
super();
this.handleInputChange = (val) => {
console.log('selectionMade: ', val, this);
};
…
}
}有一个proposal可能允许您省略constructor()，直接将赋值放在具有相同功能的类范围内，但我不建议使用它，因为它是高度实验性的。
或者，您可以始终使用.bind，它允许您在原型上声明方法，然后将其绑定到构造函数中的实例。这种方法具有更大的灵活性，因为它允许从类的外部修改方法。
class SomeClass extends React.Component {
constructor() {
super();
this.handleInputChange = this.handleInputChange.bind(this);
…
}
handleInputChange(val) {
console.log('selectionMade: ', val, this);
}
}Stack Overflow用户
发布于 2017-08-18 01:00:03
我知道这个问题已经得到了充分的回答，但我只有一点贡献(对于那些不想使用实验功能的人)。由于必须在构造函数中绑定多个函数绑定并使其看起来杂乱无章，因此我提出了一个实用方法，一旦在构造函数中进行绑定和调用，它就会自动为您完成所有必要的方法绑定。
假设我有一个带有构造函数的类：
//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
}
看起来很乱，不是吗？现在，我创建了这个实用程序方法
//src/utils/index.js
/**
* NB: to use this method, you need to bind it to the object instance calling it
*/
export function bindMethodsToSelf(objClass, otherMethodsToIgnore=[]){
const self = this;
Object.getOwnPropertyNames(objClass.prototype)
.forEach(method => {
//skip constructor, render and any overrides of lifecycle methods
if(method.startsWith('component')
|| method==='constructor'
|| method==='render') return;
//any other methods you don't want bound to self
if(otherMethodsToIgnore.indexOf(method)>-1) return;
//bind all other methods to class instance
self[method] = self[method].bind(self);
});
}
现在我所需要做的就是导入该实用程序，并向我的构造函数添加一个调用，并且我不再需要在构造函数中绑定每个新方法。新的构造函数现在看起来很干净，如下所示：
//src/components/PetEditor.jsx
import React from 'react';
import { bindMethodsToSelf } from '../utils';
class PetEditor extends React.Component {
constructor(props){
super(props);
this.state = props.currentPet || {tags:[], photoUrls: []};
this.tagInput = null;
this.htmlNode = null;
bindMethodsToSelf.bind(this)(PetEditor);
}
// ...
}
Stack Overflow用户
发布于 2018-09-05 21:17:23
您正在使用箭头函数，并将其绑定到构造函数中。因此，在使用箭头函数时不需要进行绑定
class SomeClass extends React.Component {
handleInputChange = (val) => {
console.log('selectionMade: ', val);
}
}或者，当你像下面这样使用普通函数时，你只需要在构造函数中绑定一个函数
class SomeClass extends React.Component {
constructor(props){
super(props);
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(val){
console.log('selectionMade: ', val);
}
}另外，不推荐在render中直接绑定函数。它应该始终在构造函数中
https://stackoverflow.com/questions/31362292
复制相似问题