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