在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 一直理解不了React中這里的this綁定是指什么

一直理解不了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環(huán)境里去了?可能語法有問題,或是實現(xiàn)不了,但是我就是借這個例子問一下bind()的用法
    );
  }
}

謝謝大神~~~~

回答
編輯回答
尛曖昧

class中默認是沒有this這個對象的,如果要在class中使用this,必須從父class中繼承。
class中有this,通過constructor實現(xiàn):

constructor() {
    super(...arguments);
}

繼承后的this,要在function中實現(xiàn)呢,必須綁定到function中,有兩種辦法:

  • 1、通過bind方法
constructor() {
    super(...arguments);
    this.handleClick= this.handleClick.bind(this);
}

//call
<div onClick={this.handleClick}></div>
  • 2、通過箭頭函數(shù)
<div onClick={() => this.handleClick()} />

不建議你在事件引用的時候再綁定,而是在constructor方法中綁定。也是官方推薦方法。更方便的可以使用arrow function.

2018年3月25日 02:02
編輯回答
避風港

類的實例啊 實例話后的組件

2017年5月30日 20:33