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)容，更多關于ReactNative點擊事件的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了React?Hook四種組件優(yōu)化總結(jié)，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價孩子，需要的朋友可以參考一下2022-07-07
閉包陷阱是一個常見的問題,尤其是在處理異步操作、事件處理器、或是定時器時,本文就來介紹一下React閉包陷阱產(chǎn)生和解決小結(jié),具有一定的參考價值,感興趣的可以了解一下2025-04-04
解決React報錯No duplicate props allowed
這篇文章主要為大家介紹了React報錯No duplicate props allowed解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
React如何實現(xiàn)瀏覽器打印部分內(nèi)容詳析
這篇文章主要給大家介紹了關于利用React如何實現(xiàn)瀏覽器打印部分內(nèi)容的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用React具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-05-05
這篇文章主要介紹了React Hooks常用鉤子及基本原理,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
react中如何使用定義數(shù)據(jù)并監(jiān)聽其值
這篇文章主要介紹了react中如何使用定義數(shù)據(jù)并監(jiān)聽其值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
react-redux的connect與React.forwardRef結(jié)合ref失效的解決
這篇文章主要介紹了react-redux的connect與React.forwardRef結(jié)合ref失效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
MobX 是一個簡潔的狀態(tài)管理庫,它通過透明的函數(shù)響應式編程（TFRP）使得狀態(tài)管理變得簡單和可擴展,下面就跟隨小編一起來了解一下如何在React函數(shù)式組件中使用MobX吧2024-01-01
react+ts實現(xiàn)簡單jira項目的最佳實踐記錄
這篇文章主要介紹了react+ts實現(xiàn)簡單jira項目，本文通過圖文實例相結(jié)合給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-07-07
這篇文章主要介紹了React.Children的用法詳解，幫助大家更好的理解和學習使用React框架，感興趣的朋友可以了解下2021-04-04