React學習筆記(二)—— 事件、this指向、數據賦值

事件

事件方法跟render方法是平級,因此能夠直接寫:函數

在render中建立一個button按鈕,綁定事件跟js是同樣的,都是onClick,可是不能用"",要用{}。
<button onClick={this.run}>run</button>,直接在{}中this.run綁定方法,這樣點擊button就會執行,注意this.run後面不要加(),
若是添加了()表示執行方法,頁面加載的時候直接執行。

this.獲取數據的中this的指向問題

在正常使用若是直接在rendar中用this.state.msg是沒有任何問題的,this

這樣時候的this指向這個組件。也能夠在return中添加{},在{}中寫js,如:

注意console.log(this.state.msg)後面不能加";"。 若是在render中調用一個方法,這個方法去獲取msg,這時候的this就指向的不是組織就會報錯。

解決方法:

一、第一種方法:
this.getDate.bind(this)把當前組件的this對象傳進去,這樣就會解決this指向問題。
二、第二種方法:
直接在構造方法中指明this所指向的對象,其實跟第一種沒有太大區別:3d

三、第三種方法:
ES6的方法,箭頭函數:

這時候console.log()後面添不添加";"均可以。這時候的this指向當前的上下文,也就是當前組件對象。

改變state中的數據:

一、第一種方法: code

第一次執行run方法

先點擊箭頭函數按鈕,再點擊run按鈕

二、第二種方法:

執行方法傳值:

經過bind方法傳值: cdn

相關文章
相關標籤/搜索