为什么把这个知识点放在这里呢,因为我们在查找资料的过程中,经常用到这两个函数,不过小萌学习是基于ES6的,所以()=> 函数是很常用的,所以说一这两个函数
这个问题其实是一个 JavaScript 中的问题。JavaScript中jQury的bind方法为选定元素添加事件处理程序,规定事件发生时运行的函数,所以后期需要我们学习一下JavaScript 基本语法,不要着急哦。
语法为:
$(selector).bind(event,data,function)
也就是相对应的event事件发生时就会执行function函数。data是传递数据的可选参数。event和function必须指定明确。
在React Native中bind方法的作用也是这样,为指定的事件添加相应的处理函数。就是将处理函数和指定的操作绑定在一起。操作触发时函数执行。
实现上面效果时,需要用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>
已经不可以直接点击来弹窗了。但是发现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和箭头函数都能完成这一绑定。不过箭头函数是ES6的特色哦,小萌常用箭头函数
转发自:https://www.jianshu.com/p/5fcdce6f3463