问题引入
import React, { Component } from ‘react‘; import { Text, View } from ‘react-native‘; export default class App extends Component<Props> { constructor(props){ super(props) this.state={ times:0 } this.timePlus=this.timePlus.bind(this); } timePlus(){ let time=this.state.times time++ this.setState({ times:time }) } render() { return ( <View> <Text onPress={this.timePlus}>有本事点我呀</Text>
//<Text onPress={this.timePlus.bind(this)}>有本事点我呀</Text>
<Text>你点了我{this.state.times}次</Text> </View>
);
}
}
每次在处理事件函数时都需要绑定this的bind函数;
bind() 最简单的用法是创建一个函数,使这个函数不论怎么调用都有同样的 this 值。
bind()方法会创建一个新函数,当这个新函数被调用时,它的this值是传递给bind()的第一个参数, 它的参数是bind()的其他参数和其原本的参数.
this.x = 9; var module = { x: 81, getX: function() { return this.x; } }; module.getX(); // 返回 81 var retrieveX = module.getX; retrieveX(); // 返回 9, 在这种情况下,"this"指向全局作用域 // 创建一个新函数,将"this"绑定到module对象 var boundGetX = retrieveX.bind(module); boundGetX(); // 返回 81
从实例可以看出:React构造方法中的bind会将handleClick函数与这个组件Component进行绑定以确保在这个处理函数中使用this时可以时刻指向这一组件。
源码地址:https://github.com/zuobaiquan/react-native/tree/master/myExercise/firstProject
如果 觉得文章不错,可以请博主喝一杯奶茶哦!!!