這篇文章主要介紹了詳解react關於事件繫結this的四種方式，寫的十分的全面細緻，具有一定的參考價值，對此有需要的朋友可以參考學習下。如有不足之處，歡迎批評指正。

在react元件中，每個方法的上下文都會指向該元件的例項，即自動繫結this為當前元件,而且react還會對這種引用進行快取，以達到cpu和記憶體的最大化。在使用了es6 class或者純函式時，這種自動繫結就不復存在了，我們需要手動實現this的繫結

React事件繫結類似於DOM事件繫結，區別如下：

• 1.React事件的用駝峰法命名，DOM事件事件命名是小寫
• 2.通過jsx，傳遞一個函式作為event handler，而不是一個字串。
• 3.React事件不能通過返回false來阻止預設事件，需要顯式呼叫preventDefault()
  如下例項：

<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.');
}//歡迎加入前端全棧開發交流圈一起學習交流：864305860
 
render() {
return (
<a href="#" onClick={this.handleClick.bind(this)}>Click Me...</a>
);
}
 
}
 

ps:React元件類的方法沒有預設繫結this到元件例項，需要手動繫結。
以下是幾種繫結的方法:

bind方法

直接繫結是bind（this）來繫結，但是這樣帶來的問題是每一次渲染是都會重新繫結一次bind；

class Home extends React.Component { 
 constructor(props) {
  super(props);
  this.state = {
  };//歡迎加入前端全棧開發交流圈一起學習交流：864305860
 } 
 del(){
  console.log('del')
 } 
 render() {
  return (
   <div className="home">
    <span onClick={this.del.bind(this)}></span>
   </div>
  );
 }
}
 

建構函式內繫結

在建構函式 constructor 內繫結this，好處是僅需要繫結一次，避免每次渲染時都要重新繫結，函式在別處複用時也無需再次繫結

class Home extends React.Component { 
 constructor(props) {
  super(props);
  this.state = { 
  };//歡迎加入前端全棧開發交流圈一起學習交流：864305860
  this.del=this.del.bind(this)
 } 
 del(){
  console.log('del')
 } 
 render() {
  return (
   <div className="home">
    <span onClick={this.del}></span>
   </div>
  );
 }
}

::不能傳參

如果不傳引數使用雙冒號也是可以

class Home extends React.Component { 
 constructor(props) {
  super(props);
  this.state = { 
  };//歡迎加入前端全棧開發交流圈一起學習交流：864305860
 } 
 del(){
  console.log('del')
 } 
 render() {
  return (
   <div className="home">
    <span onClick={::this.del}></span>
   </div>
  );
 }
}

箭頭函式繫結

箭頭函式不僅是函式的’語法糖’，它還自動綁定了定義此函式作用域的this，因為我們不需要再對它們進行bind方法：

class Home extends React.Component {
 constructor(props) {
  super(props);
  this.state = { 
  }; //歡迎加入前端全棧開發交流圈一起學習交流：864305860
 } 
 del=()=>{
  console.log('del')
 }
 render() {
  return (
   <div className="home">
    <span onClick={this.del}></span>
   </div>
  );
 }
}

以上幾種方法都可以實現this繫結，使用那種各自的習慣；希望對大家的學習有所幫助

結語

感謝您的觀看，如有不足之處，歡迎批評指正。

本次給大家推薦一個免費的學習群，裡面概括移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。
對web開發技術感興趣的同學，歡迎加入Q群：864305860，不管你是小白還是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時每天更新視訊資料。
最後，祝大家早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峰。