1. 程式人生 > >【React Native】React Native的bind方法

【React Native】React Native的bind方法

 這個問題其實是一個 JavaScript 中的問題。JavaScript中jQury的bind方法為選定元素新增事件處理程式,規定事件發生時執行的函式。
 
語法為:

$(selector).bind(event,data,function)

也就是相對應的event事件發生時就會執行function函式。data是傳遞資料的可選引數。event和function必須指定明確。

 在React Native中bind方法的作用也是這樣,為指定的事件新增相應的處理函式。就是將處理函式和指定的操作繫結在一起。操作觸發時函式執行。
 
 為了更明確的體現這種事件繫結關係,做下面實際例子:

 在點選登入按鈕時,彈出alert對話方塊,效果如下(只是按鈕點選與彈窗,輸入框請忽略)。
這裡寫圖片描述

實現上面效果時,需要用bind方法將點選操作和彈窗繫結在一起。
程式碼為:

       <TouchableOpacity
          style={styles.style_view_commit}
          onPress={this.show.bind(this,"XX")}
        >
          <Text style={{ color: '#fff' }}>
            登入
          </Text
>
</TouchableOpacity>

而其中的show函式:

  show(text){
    alert('確認名字為'+text+"?");
  }

這是正確的繫結,實現了點選彈窗的效果。
而當不通過bind方法時,直接呼叫this.show   就是將程式碼改為如下(show方法不變):

     <TouchableOpacity
          style={styles.style_view_commit}
          onPress={this.show("XX")}
        >
          <Text
style=
{{ color: '#fff' }}> 登入 </Text> </TouchableOpacity>

此時的效果:

xiaoguo

已經不可以直接點選來彈窗了。但是發現ReLoad時會出現彈窗。
也就是說,沒有bind時元件載入時會執行該函式,但是點選操作並不能使函式執行。

當onPress寫成this直接呼叫(this.show)時,只會在reload時呼叫一次,而後的點選操作並不會彈出alert。因為它就是在元件渲染載入時呼叫一次,並沒有將點選操作和函式關聯,做不到根據點選來執行show函式。通過bind就能解決,也就是說這裡的bind繫結,是將點選事件這個操作和show函式聯絡在一起,當點選按鈕操作時,就會執行這個函式。所以,bind函式就是建立操作和函式執行的這種聯絡。

箭頭函式也能完成事件繫結

另外,上面的bind繫結操作和show函式可以直接通過箭頭函式完成。箭頭函式可以直接完成bind繫結(它會綁定當前scope的this引用)。可以參照ES6寫法–React Native中文社群中ES5和ES6的比較–方法作為回撥部分
也就是將上面實現程式碼寫成如下形式:

      <TouchableOpacity
          style={styles.style_view_commit}
          onPress={()=>this.show("XX")}
        >
          <Text style={{ color: '#fff' }}>
            登入
          </Text>
        </TouchableOpacity>

所以,bind將事件操作和函式處理建立聯絡,bind和箭頭函式都能完成這一繫結。