這篇文章主要介紹了詳解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,快速升職加薪,走上人生巔峯。