react事件处理函数中绑定this的bind()函数

问题引入

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.timestime++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

转载于:https://www.cnblogs.com/zuobaiquan01/p/8728949.html

react事件处理函数中绑定this的bind()函数相关推荐

面试让写一个“bind”函数，详解五层bind函数进阶写法，带你写出一个让面试官满意的 “bind” 函数
文章目录手写bind函数第一层 - 绑定在原型上的方法第二层 - 改变this的指向第三层 - 支持柯里化第四层 - 考虑 new 的调用第五层 - 保留函数原型总结最终版bind函数 ...
c语言中bind函数,c/c++ 标准库 bind 函数详解
bind函数定义在头文件 functional 中.可以将 bind 函数看作一个通用的函数适配器,它接受一个可调用对象,生成一个新的可调用对象来"适应"原对象的参数列表. bin ...
【C 语言】C 项目开发代码规范 ( 形参合法性判断 | 函数返回值局部变量 | 函数中不用全局变量 | 函数中使用局部变量接收形参 | 函数返回值 | 形参作返回值 | 形参返回值处理 )
文章目录一.C 项目开发代码规范一.C 项目开发代码规范上一篇博客 [C 语言]字符串模型 ( 键值对模型 ) 中 , 完成了字符串的键值对查找功能 , 代码不太规范 ; C 项目开发代码规 ...
编写一个C程序，实现以下功能：编写一个函数decTobin(int n)，该函数能将一个十进制数n转换成二进制数，输入13 输出 1101。在main函数中输入整数n,调用函数，输出它的二进制
题目要求: 编写一个C程序,实现以下功能: //编写一个函数decTobin(int n),该函数能将一个十进制数n转换成二进制数,输入13 输出 1101. //在main函数中输入整数n,调用函数 ...
定义两个同名的重载函数，分别求矩形和圆的周长，然后在main函数中对这两个函数进行调用并测试其功能
定义两个同名的重载函数,分别求矩形和圆的周长,然后在main函数中对这两个函数进行调用并测试其功能. 求矩形的周长时需要输入矩形的长和宽:求圆的周长时需要输入圆的半径. #include<ios ...
bind函数怎么用JAVA_JavaScirpt 的 bind 函数究竟做了哪些事
JavaScirpt 的 bind 函数究竟做了哪些事文章原地址: https://github.com/catchonme/blog/issues/2 ES5 实现 bind 函数如下Functi ...
如何在matlab sfunction 函数中调用自己写的函数？
自己编写了一个s函数,有几个参数引用了自己写的几个函数,在脚本中可以正确运行,但在写成s函数,进行 simulink 仿真的时候,已知提示"too many input auguments& ...
凡是函数中未指定存储类型_函数中未指定存储类别的局部变量，其隐含的存储类别为（）...
展开全部函数中未指定存储类别的局部变量,其隐含的存储类别为自动存32313133353236313431303231363533e59b9ee7ad9431333431353338储类别. 函数中的 ...
JavaScript函数中的arguments（js函数中的arguments，函数默认参数arguments）
简述:js中的函数大家都比较熟悉,今天来分享下函数中的默认参数arguments.js的函数参数和其他的语言有些不同,它并不介意你传进来多少个参数,以及参数的数据类型,即使你在定义函数时,只设置了两个 ...

react事件处理函数中绑定this的bind()函数

react事件处理函数中绑定this的bind()函数相关推荐

最新文章

热门文章