zoukankan      html  css  js  c++  java
  • React Native 的绑定 this

    在React Native开发中,如果使用ES6语法的话,最好绑定this.但是使用ES5语法的话不需要绑定this.因为ES5会autobinding.

    this所指的就是直至包含this指针的上层对象.

    绑定this方法1:

    /**
    * Sample React Native App
    * https://github.com/facebook/react-native
    * @flow
    */

    import React, { Component } from 'react';
    import {
    AppRegistry,
    StyleSheet,
    Text,
    View
    } from 'react-native';

    export default class myProject extends Component {
    // 构造
    constructor(props) {
    super(props);
    // 初始状态
    this.state = {
    name:'shaoting',
    job:'coding'
    };
    //如果使用ES6编码 且 自定义方法里面需要使用到this .这时需要绑定this,否则报错
    //绑定this
    this.onclickOne = this.onclickOne.bind(this);
    }
    render() {
    return (
    <View style={styles.container}>
    <Text style={styles.welcome} onPress={this.onclickOne}>
    Welcome to React Native!
    </Text>
    <Text style={styles.instructions}>
    To get started, edit index.ios.js
    </Text>
    <Text style={styles.instructions}>
    Press Cmd+R to reload,{' '}
    Cmd+D or shake for dev menu
    </Text>
    </View>
    );
    }
    onclickOne(){
    alert(this.state.name);
    }
    }

    const styles = StyleSheet.create({
    container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    },
    welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    },
    instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
    },
    });

    AppRegistry.registerComponent('myProject', () => myProject);

    绑定this方法2:

     1 /**
     2  * Sample React Native App
     3  * https://github.com/facebook/react-native
     4  * @flow
     5  */
     6 
     7 import React, { Component } from 'react';
     8 import {
     9   AppRegistry,
    10   StyleSheet,
    11   Text,
    12   View
    13 } from 'react-native';
    14 
    15 export default class myProject extends Component {
    16   // 构造
    17     constructor(props) {
    18       super(props);
    19       // 初始状态
    20       this.state = {
    21         name:'shaoting',
    22           job:'coding'
    23       };
    24     }
    25   render() {
    26     return (
    27       <View style={styles.container}>
    28         <Text style={styles.welcome} onPress={this.onclickOne.bind(this)}>
    29           Welcome to React Native!
    30         </Text>
    31         <Text style={styles.instructions}>
    32           To get started, edit index.ios.js
    33         </Text>
    34         <Text style={styles.instructions}>
    35           Press Cmd+R to reload,{'
    '}
    36           Cmd+D or shake for dev menu
    37         </Text>
    38       </View>
    39     );
    40   }
    41     onclickOne(){
    42        alert(this.state.name);
    43     }
    44 }
    45 
    46 const styles = StyleSheet.create({
    47   container: {
    48     flex: 1,
    49     justifyContent: 'center',
    50     alignItems: 'center',
    51     backgroundColor: '#F5FCFF',
    52   },
    53   welcome: {
    54     fontSize: 20,
    55     textAlign: 'center',
    56     margin: 10,
    57   },
    58   instructions: {
    59     textAlign: 'center',
    60     color: '#333333',
    61     marginBottom: 5,
    62   },
    63 });
    64 
    65 AppRegistry.registerComponent('myProject', () => myProject);

    绑定this方法3(推荐):

     1 /**
     2  * Sample React Native App
     3  * https://github.com/facebook/react-native
     4  * @flow
     5  */
     6 
     7 import React, { Component } from 'react';
     8 import {
     9   AppRegistry,
    10   StyleSheet,
    11   Text,
    12   View
    13 } from 'react-native';
    14 
    15 export default class myProject extends Component {
    16   // 构造
    17     constructor(props) {
    18       super(props);
    19       // 初始状态
    20       this.state = {
    21         name:'shaoting',
    22           job:'coding'
    23       };
    24     }
    25   render() {
    26     return (
    27       <View style={styles.container}>
    28         <Text style={styles.welcome} onPress={this.onclickOne}>
    29           Welcome to React Native!
    30         </Text>
    31         <Text style={styles.instructions}>
    32           To get started, edit index.ios.js
    33         </Text>
    34         <Text style={styles.instructions}>
    35           Press Cmd+R to reload,{'
    '}
    36           Cmd+D or shake for dev menu
    37         </Text>
    38       </View>
    39     );
    40   }
    41     onclickOne = () =>{
    42        alert(this.state.name);
    43     }
    44 }
    45 
    46 const styles = StyleSheet.create({
    47   container: {
    48     flex: 1,
    49     justifyContent: 'center',
    50     alignItems: 'center',
    51     backgroundColor: '#F5FCFF',
    52   },
    53   welcome: {
    54     fontSize: 20,
    55     textAlign: 'center',
    56     margin: 10,
    57   },
    58   instructions: {
    59     textAlign: 'center',
    60     color: '#333333',
    61     marginBottom: 5,
    62   },
    63 });
    64 
    65 AppRegistry.registerComponent('myProject', () => myProject);

     

  • 相关阅读:
    CSRF的防御解决过程
    Spring生态研习【三】:Spring-kafka
    Spring生态研习【二】:SpEL(Spring Expression Language)
    Spring生态研习【一】:定时任务Spring-task
    给定一个大的任务,需要在考虑性能的情况下,快速处理完,并报告结果
    给定一个大于2的偶数,将其分解为两个质数的和
    一个求解平方根的算法题
    Kafka研究【一】:bring up环境
    LB+nginx+tomcat7集群模式下的https请求重定向(redirect)后变成http的解决方案
    IDEA使用笔记(八)——自动生成 serialVersionUID 的设置
  • 原文地址:https://www.cnblogs.com/shaoting/p/6108809.html
Copyright © 2011-2022 走看看