Question

我是React的新手，我正在通过构建一个简单的测试应用程序来学习，其中我对“ this”绑定有疑问。我昨天使用“ create-react-app”创建了此应用包，因此babel和所有其他插件都应该是最新的。

关于我的问题：如果我在类中使用箭头函数声明“ this”的方法，则一切正常

class abc extends Component {
  constructor (props) {
    super(props);
    this.state = {};
  }
  someMethod = () => {
    console.log(this);  //"this" works fine
  }
}

但是当我尝试在构造函数中使用显式的“ this”绑定来执行相同操作时，则绑定不起作用，并且“ this”未定义：

class abc extends Component {
  constructor (props) {
    super(props);
    this.state = {};
    this.someMethod.bind(this)
  }
  someMethod () {
    console.log(this);  //"this" is undefined
  }
}

能否请您帮我了解为什么它不起作用？我读过一些有关JS和React中“ this”绑定的文章和章节，我认为上面的两个代码示例应该完全一样。

//编辑// 感谢大伙们。因此，事实证明我只是忘记分配该功能的新版本。现在我觉得自己没发现它很蠢：P

Answer 1

class abc extends Component {
  constructor (props) {
    super(props);
    this.state = {};
    this.someMethod= this.someMethod.bind(this)  //modified this line
  }
  someMethod () {
    console.log(this); 
  }
}

这将起作用，我已经进行了更改

Answer 2

当您通过arrow function时，不需要在构造函数中绑定它。构造器绑定是您的“常规”功能。您可以使用以下两个代码：

class abc extends Component {
  constructor (props) {
    super(props);
    this.state = {};
  }
  someMethod =  () =>{
    console.log(this); 
  }
}

或

class abc extends Component {
  constructor (props) {
    super(props);
    this.state = {};
 this.someMethod= this.someMethod.bind(this)
  }
  someMethod () {
    console.log(this); 
  }
}

反应-在构造函数中绑定此无效

2 个答案: