【React Native】React Native的bind方法

这个问题其实是一个 JavaScript 中的问题。JavaScript中jQury的bind方法为选定元素添加事件处理程序，规定事件发生时运行的函数。 
　 
语法为：

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

• 1
• 2

也就是相对应的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>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

而其中的show函数：

  show(text){
    alert('确认名字为'+text+"?");
  }

• 1
• 2
• 3

这是正确的绑定，实现了点击弹窗的效果。 
而当不通过bind方法时，直接调用this.show 　 就是将代码改为如下(show方法不变)：

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

此时的效果： 

 

已经不可以直接点击来弹窗了。但是发现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>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

所以，bind将事件操作和函数处理建立联系，bind和箭头函数都能完成这一绑定。