小編給大家分享一下react關(guān)于事件綁定this的方式有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)公司是一家以網(wǎng)絡(luò)技術(shù)公司，為中小企業(yè)提供網(wǎng)站維護(hù)、網(wǎng)站設(shè)計(jì)、成都網(wǎng)站設(shè)計(jì)、網(wǎng)站備案、服務(wù)器租用、空間域名、軟件開(kāi)發(fā)、小程序制作等企業(yè)互聯(lián)網(wǎng)相關(guān)業(yè)務(wù)，是一家有著豐富的互聯(lián)網(wǎng)運(yùn)營(yíng)推廣經(jīng)驗(yàn)的科技公司，有著多年的網(wǎng)站建站經(jīng)驗(yàn)，致力于幫助中小企業(yè)在互聯(lián)網(wǎng)讓打出自已的品牌和口碑，讓企業(yè)在互聯(lián)網(wǎng)上打開(kāi)一個(gè)面向全國(guó)乃至全球的業(yè)務(wù)窗口：建站聯(lián)系熱線：18982081108

在react組件中，每個(gè)方法的上下文都會(huì)指向該組件的實(shí)例，即自動(dòng)綁定this為當(dāng)前組件,而且react還會(huì)對(duì)這種引用進(jìn)行緩存，以達(dá)到cpu和內(nèi)存的大化。在使用了es6 class或者純函數(shù)時(shí)，這種自動(dòng)綁定就不復(fù)存在了，我們需要手動(dòng)實(shí)現(xiàn)this的綁定

React事件綁定類(lèi)似于DOM事件綁定，區(qū)別如下：

1.React事件的用駝峰法命名，DOM事件事件命名是小寫(xiě)

2.通過(guò)jsx，傳遞一個(gè)函數(shù)作為event handler，而不是一個(gè)字符串。

3.React事件不能通過(guò)返回false來(lái)阻止默認(rèn)事件，需要顯式調(diào)用preventDefault()

如下實(shí)例：

<a href="#" onclick="console.log('The link was clicked.'); return false">
Click me
</a>

class ActionLink extends React.Component {
constructor(props) {
super(props);
}

handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}

render() {
return (
<a href="#" onClick={this.handleClick.bind(this)}>Click Me...</a>
);
}

}

ps:React組件類(lèi)的方法沒(méi)有默認(rèn)綁定this到組件實(shí)例，需要手動(dòng)綁定。

以下是幾種綁定的方法:

bind方法

直接綁定是bind（this）來(lái)綁定，但是這樣帶來(lái)的問(wèn)題是每一次渲染是都會(huì)重新綁定一次bind；

class Home extends React.Component {

 constructor(props) {
  super(props);
  this.state = {
  };
 }

 del(){
  console.log('del')
 }

 render() {
  return (
   <div className="home">
    <span onClick={this.del.bind(this)}></span>
   </div>
  );
 }
}

構(gòu)造函數(shù)內(nèi)綁定

在構(gòu)造函數(shù) constructor 內(nèi)綁定this，好處是僅需要綁定一次，避免每次渲染時(shí)都要重新綁定，函數(shù)在別處復(fù)用時(shí)也無(wú)需再次綁定

class Home extends React.Component {

 constructor(props) {
  super(props);
  this.state = {

  };
  this.del=this.del.bind(this)
 }

 del(){
  console.log('del')
 }

 render() {
  return (
   <div className="home">
    <span onClick={this.del}></span>
   </div>
  );
 }
}

::不能傳參

如果不傳參數(shù)使用雙冒號(hào)也是可以

class Home extends React.Component {

 constructor(props) {
  super(props);
  this.state = {

  };
 }

 del(){
  console.log('del')
 }

 render() {
  return (
   <div className="home">
    <span onClick={::this.del}></span>
   </div>
  );
 }
}

箭頭函數(shù)綁定

箭頭函數(shù)不僅是函數(shù)的'語(yǔ)法糖'，它還自動(dòng)綁定了定義此函數(shù)作用域的this，因?yàn)槲覀儾恍枰賹?duì)它們進(jìn)行bind方法：

class Home extends React.Component {

 constructor(props) {
  super(props);
  this.state = {

  };

 }

 del=()=>{
  console.log('del')
 }

 render() {
  return (
   <div className="home">
    <span onClick={this.del}></span>
   </div>
  );
 }
}

以上是“react關(guān)于事件綁定this的方式有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

當(dāng)前標(biāo)題：react關(guān)于事件綁定this的方式有哪些-創(chuàng)新互聯(lián)
轉(zhuǎn)載來(lái)于：http://www.rwnh.cn/article16/dghpdg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、服務(wù)器托管、Google、品牌網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計(jì)、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)