ReactNative点击事件.bind(this)操作分析
更新时间：2023年11月28日 09:04:27 作者：NoSilverBullet
这篇文章主要为大家介绍了ReactNative点击事件.bind(this)操作分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
一、前言
在React或React-native的点击事件中，会经常用到bind(this)。比如说一个简单的React-native点击组件：
export default class AwesomeProject extends Component {
constructor(props){
super(props);
this.state = {
}
}
handleClick () {
console.log('this is:',this);
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome} onPress={this.handleClick.bind(this)}>
Welcome to React Native!
</Text>
</View>
);
}
}在上面的代码中，我们对点击事件函数进行了bind(this)操作，如果不bind(this)的this会怎么样？
上图是执行了.bind(this)的，而下图是没有.bind(this)的。由执行结果可知，如果没有bind(this)，在执行这个函数时，取到的this是这个text组件。
二、React中bind方法的选择
因为箭头函数与bind(this)的作用是一样的，()=>{} 这种形式的代码，语法规定就是(function(){}).bind(this),即自动添加了bind(this)。所以我们可以有4种选择：
//写法1
<View onPress={this.handleClick.bind(this)}></View>
//写法2
constructor(props){
super(props);
this.handleClick = this.handleClick.bind(this);
}
//写法3
<View onPress={()=>this.handleClick()}>
//写法4
handleClick = () => {
}因为bind方法会重新生成一个新函数，所以写法2和写法3每次render都会生成新的函数，所以建议使用1或4。
以上就是ReactNative点击事件.bind(this)操作分析的详细内容，更多关于ReactNative点击事件的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了React Hook四种组件优化总结，文章围绕主题展开详细的内容介绍，具有一定的参考价孩子，需要的朋友可以参考一下2022-07-07
闭包陷阱是一个常见的问题,尤其是在处理异步操作、事件处理器、或是定时器时,本文就来介绍一下React闭包陷阱产生和解决小结,具有一定的参考价值,感兴趣的可以了解一下2025-04-04
解决React报错No duplicate props allowed
这篇文章主要为大家介绍了React报错No duplicate props allowed解决方法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要给大家介绍了关于利用React如何实现浏览器打印部分内容的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用React具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-05-05
这篇文章主要介绍了React Hooks常用钩子及基本原理,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了react中如何使用定义数据并监听其值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
react-redux的connect与React.forwardRef结合ref失效的解决
这篇文章主要介绍了react-redux的connect与React.forwardRef结合ref失效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
MobX 是一个简洁的状态管理库,它通过透明的函数响应式编程（TFRP）使得状态管理变得简单和可扩展,下面就跟随小编一起来了解一下如何在React函数式组件中使用MobX吧2024-01-01
这篇文章主要介绍了react+ts实现简单jira项目，本文通过图文实例相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-07-07
这篇文章主要介绍了React.Children的用法详解，帮助大家更好的理解和学习使用React框架，感兴趣的朋友可以了解下2021-04-04
最新评论