快捷導(dǎo)航

ReactNative點(diǎn)擊事件.bind(this)操作分析

更新時(shí)間：2023年11月28日 09:04:27 作者：NoSilverBullet

這篇文章主要為大家介紹了ReactNative點(diǎn)擊事件.bind(this)操作分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

一、前言

在React或React-native的點(diǎn)擊事件中，會(huì)經(jīng)常用到bind(this)。比如說(shuō)一個(gè)簡(jiǎn)單的React-native點(diǎn)擊組件：

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>
    );
  }
}

在上面的代碼中，我們對(duì)點(diǎn)擊事件函數(shù)進(jìn)行了bind(this)操作，如果不bind(this)的this會(huì)怎么樣？

上圖是執(zhí)行了.bind(this)的，而下圖是沒(méi)有.bind(this)的。由執(zhí)行結(jié)果可知，如果沒(méi)有bind(this)，在執(zhí)行這個(gè)函數(shù)時(shí)，取到的this是這個(gè)text組件。

二、React中bind方法的選擇

因?yàn)榧^函數(shù)與bind(this)的作用是一樣的，()=>{} 這種形式的代碼，語(yǔ)法規(guī)定就是(function(){}).bind(this),即自動(dòng)添加了bind(this)。所以我們可以有4種選擇：

  //寫(xiě)法1
  <View onPress={this.handleClick.bind(this)}></View>
  //寫(xiě)法2
  constructor(props){
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  //寫(xiě)法3
  <View onPress={()=>this.handleClick()}>
  //寫(xiě)法4
  handleClick = () => {
  }

因?yàn)閎ind方法會(huì)重新生成一個(gè)新函數(shù)，所以寫(xiě)法2和寫(xiě)法3每次render都會(huì)生成新的函數(shù)，所以建議使用1或4。

以上就是ReactNative點(diǎn)擊事件.bind(this)操作分析的詳細(xì)內(nèi)容，更多關(guān)于ReactNative點(diǎn)擊事件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

React項(xiàng)目中使用Redux的?react-redux
這篇文章主要介紹了React項(xiàng)目中使用Redux的?react-redux，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2022-09-09
React使用Redux Toolkit的方法示例
Redux Toolkit可以幫助開(kāi)發(fā)者更快速、更高效地編寫(xiě)Redux應(yīng)用,本文主要介紹了React使用Redux Toolkit的方法示例,具有一定的參考價(jià)值,感興趣的可以了解一下
2025-04-04
react如何獲取state的值并更新使用
這篇文章主要介紹了react如何獲取state的值并更新使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
ReactJS入門(mén)實(shí)例教程詳解
React.render?是?React?的最基本方法，用于將模板轉(zhuǎn)為?HTML?語(yǔ)言，并插入指定的?DOM?節(jié)點(diǎn)，這篇文章主要介紹了ReactJS入門(mén)實(shí)例教程,需要的朋友可以參考下
2022-06-06
深入淺析React中diff算法
React 最為核心的就是 Virtual DOM 和 Diff 算法，diff算法的基礎(chǔ)是Virtual DOM，接下來(lái)通過(guò)本文給大家介紹React中diff算法的相關(guān)知識(shí)，對(duì)React中diff算法感興趣的朋友跟隨小編一起學(xué)習(xí)下吧
2021-05-05
ReactNative之FlatList的具體使用方法
本篇文章主要介紹了ReactNative之FlatList的具體使用方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-11-11
vite+react+tailwindcss的簡(jiǎn)單使用方式
這篇文章主要介紹了vite+react+tailwindcss的簡(jiǎn)單使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-01-01
React組件的生命周期詳細(xì)描述
本篇文章主要介紹了React組件生命周期，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2021-10-10
React復(fù)制到剪貼板的示例代碼
本篇文章主要介紹了React復(fù)制到剪貼板的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-08-08
react實(shí)現(xiàn)一個(gè)優(yōu)雅的圖片占位模塊組件詳解
這篇文章主要給大家介紹了關(guān)于react如何實(shí)現(xiàn)一個(gè)還算優(yōu)雅的占位模塊圖片組件的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
2017-10-10