React Native 的绑定 this
2016-11-28 11:34
489 查看
在React Native开发中,如果使用ES6语法的话,最好绑定this.但是使用ES5语法的话不需要绑定this.因为ES5会autobinding.
this所指的就是直至包含this指针的上层对象.
绑定this方法1:
绑定this方法2:
绑定this方法3(推荐):
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:
/** * 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' }; } render() { return ( <View style={styles.container}> <Text style={styles.welcome} onPress={this.onclickOne.bind(this)}> 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> ); } 41 onclickOne(){ 42 alert(this.state.name); 43 } } 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方法3(推荐):
/** * 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' }; } 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> ); } 41 onclickOne = () =>{ 42 alert(this.state.name); 43 } } 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);
相关文章推荐
- React-Native的绑定this
- ReactNative中 ...this.other与...this.props的区别
- react native -- this.props.children
- 运行React Native示例出现null is not an object (evaluating 'this.state.text')
- 《React-Native系列》17、 RN中this所引起的undefined is not an object错误
- React:ES6:ES7中的6种this绑定方法
- react native 代参bind this 的两种方式
- React-native 知识点-this.bind-返回键-React.cloneElement-控件显示隐藏-ScrollView
- 【React Native】常见的函数绑定方法
- 《React-Native系列》17、 RN中this所引起的undefined is not an object错误
- react native onPress响应方法是否加bind(this)
- React:ES6:ES7中的6种this绑定方法
- React绑定this的三种方式
- 【React Native】常见的函数绑定方法
- React Native绑定微信分享/登录/支付(演示+实现步骤+注意事项)
- ReactNative bug:Application has not bean registered.This is either due to require()error dur
- ReactNative http请求绑定ListView的小案例
- React Native 原生与JS之间事件绑定注册 作用在于原生可以直接调用JS的方法
- React Native 与 夜神模拟器的绑定
- React技巧8(不再手动绑定this,跟.bind(this)说88)