在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,{'\n'} 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,{'\n'} 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,{'\n'} 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);