1.JavaScript自身特性说明
如果传递一个函数名给一个变量,之后通过函数名()的方式进行调用,在方法内部如果使用this则this的指向会丢失。
示例代码:
首先我们创建test对象并直接调用方法 :

const test = {
name:'jack',
getName:function(){
console.log(this.name)
}
}
test.getName()
1
2
3
4
5
6
7
使用node test.js执行上述代码可以正常输出jack。
之后,我们对代码进行调整:

const test = {
name:'jack',
getJack:function(){
console.log(this.name)
}
}
const func = test.getJack;
func();
1
2
3
4
5
6
7
8
我们没有直接调用对象的方法,而是将方法声明给一个中间变量,之后利用中间变量()调用方法,此时this则失去指向,输出undefined,如果使用node环境执行js文件则输出node相关信息,如嵌入到html中则this指向window对象。

2.React事件绑定
React中的bind同上方原理一致,在JSX中传递的事件不是一个字符串,而是一个函数(如:onClick={this.handleClick}),此时onClick即是中间变量,所以处理函数中的this指向会丢失。解决这个问题就是给调用函数时bind(this),从而使得无论事件处理函数如何传递,this指向都是当前实例化对象。
当然,如果不想使用bind(this),我们可以在声明函数时使用箭头函数将函数内容返回给一个变量,并在调用时直接使用this.变量名即可。示例代码如下:

import React from 'react';
export default class Life extends React.Component{
constructor(props){
super(props);
this.state = {
count:4
};
}
render(){
var style = {
padding:'10px',
color:'red',
fontSize:'30px'
}
return (
<div style={style}>{/*注意js语法使用一个括号{}去表示,style使用两个括号,原因里面其实是一个对象*/}
<p>React生命周期介绍</p>
<button onClick={this.handleAdd}>无bind点击一下</button>
<button onClick={this.handleClick.bind(this)}>有bind点击一下</button>
<p>{this.state.count}</p>
</div>
)
}
//此时this指向是当前实例对象
handleAdd = ()=> {
console.log(this)
this.setState({
count:5
})
}
handleClick(){
this.setState({
count:6
})
}
}
---------------------
版权声明:本文为CSDN博主「汪喆_Jack」的原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_34829447/article/details/81705977

(转)React事件处理函数必须使用bind(this)的原因的更多相关文章

  1. 为什么React事件处理函数必须使用Function.bind()绑定this?

    最近在React官网学习Handling Events这一章时,有一处不是很明白.代码如下: class Toggle extends React.Component { constructor(pr ...

  2. React事件处理函数传参问题

    React事件处理函数参数 HTML标签与React 组件是不同的,事件对象e是HTML标签元素的,组件没有的.

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

    问题引入 import React, { Component } from 'react'; import { Text, View } from 'react-native'; export def ...

  4. React事件处理函数的bind复用和name复用

    一.bind复用 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&qu ...

  5. React为啥很多类里的标签上事件处理函数要用bind(this)

    render() { return ( <div> <p onClick={this.clickHandler.bind(this)}>vz</p> </di ...

  6. React 事件处理函数

    触摸事件:onTouchCancel\onTouchEnd\onTouchMove\onTouchStart (只会在移动设备上接受) 键盘事件:onKeyDown\onKeyPress\onKeyU ...

  7. React 学习(三) ---- state 和 事件处理函数

    在上两节中,我们讲述了props, 组件使用props进行渲染,但是这是一次性的, props渲染完成之后就不做任何事情了,但是现实中却不是这样的,当我们点击购物车上的加减按钮时,数量会自动加1或减1 ...

  8. Jquery动态绑定事件处理函数 bind / on / delegate

    1.bind方法绑定的事件处理函数不会应用到后来添加到DOM中的新元素.比如你在用bind给页面元素绑定事件之后,又新添加了一些与之前绑定过事件的元素一样的DOM元素,但是这些事件并不能在新的DOM元 ...

  9. React事件处理、收集表单数据、高阶函数

    3.React事件处理.收集表单数据.高阶函数 3.1事件处理 class Demo extends React.Component { /* 1. 通过onXxx属性指定事件处理函数(注意大小写) ...

随机推荐

  1. C# 运行流程

    转载  https://www.cnblogs.com/qcloud1001/p/9816956.html 从编译原理说起 一句话介绍编译器:编译器是将用某种程式语言写成的源代码(源语言),转换成另一 ...

  2. 关于使用jquery form submit出现多次提交的问题

    错误的写法: $(this).submit(function () { $(this).ajaxSubmit({ url: opts.url, type: 'post', dataType: 'jso ...

  3. 2019 央视网java面试笔试题 (含面试题解析)

    本人3年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.央视网等公司offer,岗位是Java后端开发,最终选择去了央视网. 面试了很多家公司,感觉大部分公司考察的点都差 ...

  4. UIView与CALayer的区别,很详细(基础教学拓展)转

    研究Core Animation已经有段时间了,关于Core Animation,网上没什么好的介绍.苹果网站上有篇专门的总结性介绍,但是似乎原理性的东西不多,看得人云山雾罩,感觉,写那篇东西的人,其 ...

  5. IDEA中Tomcat热部署不生效问题解决办法

    IDEA中Tomcat热部署不生效问题解决办法 1.设置完热部署后 2.一定要在Debug模式下运行不要点RUN!!!!!!!!!!!!!!!!!

  6. Java 之 框架概述

    一.什么是框架 框架(Framework)是整个或部分系统的可重用设计,表现为一组抽象构件及构件实例间交互的方法;另一种定义认为,框架是可被应用开发者定制的应用骨架.前者是从应用方面而后者是从目的方面 ...

  7. Java虚拟机如何运行Java字节码

    一.Java的class文件的内容 1.首先编写一个简单的代码 public class StringDemo { public static void main(String[] args) { S ...

  8. java实现mysql数据备份

    /** * @param hostIP ip地址,可以是本机也可以是远程 * @param userName 数据库的用户名 * @param password 数据库的密码 * @param sav ...

  9. TensorFlow 2 快速教程,初学者入门必备

    TensorFlow 2 简介 TensorFlow 是由谷歌在 2015 年 11 月发布的深度学习开源工具,我们可以用它来快速构建深度神经网络,并训练深度学习模型.运用 TensorFlow 及其 ...

  10. CentOS7源码安装Redis5.0.4非关系型数据库

    源码安装redis-5.0.4 一. 下载redis 1. 需要连接网络 二. 案例(另一种安装方法) [root@localhost ~]# wget http://download.redis.i ...