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

     

  • 相关阅读:
    JAVA调用WebService总结
    关于购物车的想法
    ASP.NET中初试Ajax
    转帖:从FxCop归纳出来的一些规范建议
    数据结构(二叉树)C#描述
    FormView控件和DetailsGridView控件实现MasterSlave
    在.NET中使用MySql数据库
    Oracle学习总结1
    Oracle学习总结2
    关于字符匹配所引起的的问题
  • 原文地址:https://www.cnblogs.com/shaoting/p/6108809.html
Copyright © 2011-2022 走看看