ReactNative點擊事件.bind(this)操作分析
更新時間：2023年11月28日 09:04:27 作者：NoSilverBullet
這篇文章主要為大家介紹了ReactNative點擊事件.bind(this)操作分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
一、前言
在React或React-native的點擊事件中，會經(jīng)常用到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>
);
}
}在上面的代碼中，我們對點擊事件函數(shù)進行了bind(this)操作，如果不bind(this)的this會怎么樣？
上圖是執(zhí)行了.bind(this)的，而下圖是沒有.bind(this)的。由執(zhí)行結(jié)果可知，如果沒有bind(this)，在執(zhí)行這個函數(shù)時，取到的this是這個text組件。
二、React中bind方法的選擇
因為箭頭函數(shù)與bind(this)的作用是一樣的，()=>{} 這種形式的代碼，語法規(guī)定就是(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方法會重新生成一個新函數(shù)，所以寫法2和寫法3每次render都會生成新的函數(shù)，所以建議使用1或4。
以上就是ReactNative點擊事件.bind(this)操作分析的詳細內(nèi)容，更多關(guān)于ReactNative點擊事件的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了React項目中使用Redux的?react-redux，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
Redux Toolkit可以幫助開發(fā)者更快速、更高效地編寫Redux應用,本文主要介紹了React使用Redux Toolkit的方法示例,具有一定的參考價值,感興趣的可以了解一下2025-04-04
這篇文章主要介紹了react如何獲取state的值并更新使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
React.render?是?React?的最基本方法，用于將模板轉(zhuǎn)為?HTML?語言，并插入指定的?DOM?節(jié)點，這篇文章主要介紹了ReactJS入門實例教程,需要的朋友可以參考下2022-06-06
React 最為核心的就是 Virtual DOM 和 Diff 算法，diff算法的基礎(chǔ)是Virtual DOM，接下來通過本文給大家介紹React中diff算法的相關(guān)知識，對React中diff算法感興趣的朋友跟隨小編一起學習下吧2021-05-05
本篇文章主要介紹了ReactNative之FlatList的具體使用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了vite+react+tailwindcss的簡單使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
本篇文章主要介紹了React組件生命周期，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2021-10-10
本篇文章主要介紹了React復制到剪貼板的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
react實現(xiàn)一個優(yōu)雅的圖片占位模塊組件詳解
這篇文章主要給大家介紹了關(guān)于react如何實現(xiàn)一個還算優(yōu)雅的占位模塊圖片組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2017-10-10