一直理解不了React中这里的this绑定是指什么

在学习React框架的时候,遇到个问题。一直不理解这里的.bind(this)中的this指代什么,我先上代码


import React from 'react';


class Contacts extends React.Component {

  constructor(props) {

    super(props);

  }

  handleClick() {

    console.log(this); // React Component instance

  }

  render() {

    return (

      <div onClick={this.handleClick.bind(this)}></div>

    );

  }

}


export default Contacts;

这里的 this.handleClick.bind(this) 最后这个this知道的就是 Contacts这个类吗?

但是我看别的例子中的this介绍,比如下面这个


var foo={x:3}

var bar=function(){console.log(this.x)}

bar()   //undefined


var boundFunc=bar.bind(foo);

boundFunc();    //3

这里的this是换了一个scope,那么我问题中问的this指代的就是 Contacts这个类吗?


class A extends React.Component{

    constructor(props) {

    super(props);

  }

  handleClick() {

    console.log(this); 

  }

    render() {

    return (

      <div onClick={this.handleClick.bind(this)}></div>

    );

  }

}

class B extends React.Component{

    handleClick() {

    console.log("XXXX"); 

  }

    render() {

    return (

      <div onClick={this.handleClick.bind(A)}></div>   //我这里这么写是不是就可以把这里的socpe绑定到 class A环境里去了?可能语法有问题,或是实现不了,但是我就是借这个例子问一下bind()的用法

    );

  }

}

谢谢大神~~~


jeck猫
浏览 729回答 2
2回答

繁星淼淼

类的实例啊 实例话后的组件

BIG阳

class中默认是没有this这个对象的,如果要在class中使用this,必须从父class中继承。让class中有this,通过constructor实现:constructor() {&nbsp; &nbsp; super(...arguments);}继承后的this,要在function中实现呢,必须绑定到function中,有两种办法:1、通过bind方法constructor() {&nbsp; &nbsp; super(...arguments);&nbsp; &nbsp; this.handleClick= this.handleClick.bind(this);}//call<div onClick={this.handleClick}></div>2、通过箭头函数<div onClick={() => this.handleClick()} />不建议你在事件引用的时候再绑定,而是在constructor方法中绑定。也是官方推荐方法。更方便的可以使用arrow function.
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript