文章詳情頁
javascript - React中組件綁定this
瀏覽:233日期:2023-05-05 18:28:44
問題描述

<button onClick={this.handleEvent}> //這里的this是toggle組件 為什么還需要在組件里綁定這個函數的this {this.state.isToggleOn === true ? ’on’ : ’off’}</button>
想不明白這里的this綁定
問題解答
回答1:因為在class中聲明函數,并不會自動綁定this對象
所以,你在onClick={this.handleEvent}的時候,分解成兩步你就懂了:
let handleEvent = this.handleEvent;...onClick={handleEvent}...
所以,onClick調用的時候,handleEvent中的this會是undefined(根據文檔)
所以,你需要bind一下, 那么里面的this就是當前組件啦。
還有一種方便的寫法,就是用箭頭函數聲明:
handleEvent = (e)=>{}render(){ ...onClick={this.handleEvent}...}回答2:
因為handleEvent中this.setState...的this并沒有綁定this
可以采用箭頭函數的語法糖來綁定this
handleEvent = () => { this.setState...}
標簽:
JavaScript
相關文章:
1. javascript - immutable配合react提升性能?2. javascript - sublime快鍵鍵問題3. javascript - nodejs關于進程間發(fā)送句柄的一點疑問4. javascript - 移動端上不能實現拖拽布局嗎?5. 實現bing搜索工具urlAPI提交6. Apache 已經把網站根目錄的改為allow from all了,但是服務器還是不能訪問?7. css - 寫頁面遇到個布局問題,求大佬們幫解答,在線等,急!~8. phpstudy8.1支持win11系統嗎?9. 配置Apache時,添加對PHP的支持時語法錯誤10. vue.js - Vue 如何像Angular.js watch 一樣監(jiān)聽數據變化
排行榜

網公網安備