我们都知道在React中使用函数时,有两种写法,一是回调函数,二是直接调用,但需要在构造函数中绑定this,只有这样,函数中的this才指向本组件

总结一下没有绑定this的函数中的this指向

不管是在本组件的元素上调用的函数还是传递给子组件的函数,不管有没有绑定this,它们调用的都是本组件里的函数,即调用函数的this指向的是本组件

例如: class Parent extends React.Component {

constructor(props) { supper(props); }

handleSubmit() {}

render() {

return (

<div>

<button onClick={this.handleSubmit}>点击按钮</button>

<Child  onFunc={this.handleSubmit} />

</div>

);

}

}

<button>与<Child />调用的都是Parent组件中的handleSubmit,不同的是handleSubmit函数中的this指向

<button>的handleSubmit中的this为undefined

<Child />的handleSubmit中的this指向Child组件的propTypes对象

React之函数中的this指向的更多相关文章

  1. JS回调函数中的this指向(详细)

    首先先说下正常的this指向问题 什么是this:自动引用正在调用当前方法的.前的对象. this指向的三种情况 1. obj.fun()     fun中的this->obj,自动指向.前的对 ...

  2. Javascript回调函数中的this指向问题

    使用js中的定时器(setInterval,setTimeout),很容易会遇到this指向的问题. 直接上例子: 1 var name = 'my name is window'; 2 var ob ...

  3. 改变函数中的 this 指向——神奇的call,apply和bind及其应用

    在JavaScript 中,call.apply 和 bind 是 Function 对象自带的三个方法,这三个方法的主要作用是改变函数中的 this 指向,从而可以达到`接花移木`的效果.本文将对这 ...

  4. js闭包中的this(匿名函数中的this指向的是windows)

    js闭包中的this(匿名函数中的this指向的是windows) 一.总结 1.普通函数中的this指向的是对象,匿名函数中的this指向的是windows,和全局变量一样 2.让匿名函数中的thi ...

  5. JS的一些总结(函数声明和函数表达式的区别,函数中的this指向的问题,函数不同的调用方式,函数也是对象,数组中的函数调用)

    一.函数声明和函数表达式的区别: 函数声明放在if——else语句中,在IE8中会出现问题 函数表达式则不会 <script> if(true){ function f1(){ conso ...

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

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

  7. 彻底搞清函数中的this指向

    近日阅读<javascript设计模式与开发实践> 书中的apply和call调用函数层出不穷,很多妙用: 函数中的this是根据调用方式来决定的 函数调用方式有4中 1.直接调用 a(. ...

  8. 普通函数跟箭头函数中this的指向问题

    箭头函数和普通函数的区别如下. 普通函数:根据调用我的人(谁调用我,我的this就指向谁) 箭头函数:根据所在的环境(我再哪个环境中,this就指向谁) 一针见血式总结: 普通函数中的this: 1. ...

  9. 箭头函数,闭包函数中的this指向

    在javscript中,this 是在函数运行时自动生成的一个内部指针,它指向函数的调用者. 箭头函数有些不同,它的this是继承而来, 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象. ...

随机推荐

  1. D3.js(v3)+react框架 基础部分之数据绑定及其工作过程与绑定顺序

    数据绑定: 将数据绑定到Dom上,是D3最大的特色.d3.select和d3.selectAll返回的元素的选择集.选择集上是没有数据的. 数据绑定就是使被选择元素里“含有”数据. 相关函数有两个: ...

  2. coursera 视频总是缓冲或者无法观看,有什么方法解决?

    win7电脑,三个步骤: (1)修改hosts文件,地址如下: C:\Windows\System32\drivers\etc,然后以文本格式打开hosts. (2)将如下内容复制到文件末尾 52.8 ...

  3. tensorflow进阶篇-4(损失函数3)

    Softmax交叉熵损失函数(Softmax cross-entropy loss)是作用于非归一化的输出结果只针对单个目标分类的计算损失.通过softmax函数将输出结果转化成概率分布,然后计算真值 ...

  4. webstorm引用ESLint进行静态代码检查

    安装 ESLint 基于 Node 平台,所以 Nodejs 是必须安装的,然后通过 npm 安装 ESLint 包,至于全局安装还是作为开发依赖安装,取决于个人. 然后在 WebStorm 中,打开 ...

  5. 自测 基础 js 脚本。

    <html> <head> <script> //function(<text>a{[]}lert('x')</text>)() docum ...

  6. JAVA面试精选【Java基础第三部分】

    上一篇,我们给出了大概35个题目,都是基础知识,有童鞋反映题目过时了,其实不然,这些是基础中的基础,但是也是必不可少的,面试题目中还是有一些基础题目的,我们本着先易后难的原则,逐渐给出不同级别的题目, ...

  7. JVM(四)JVM的双亲委派模型

    1.两种不同的类加载器 从JAVA虚拟机的角度来讲,只存在两种不同的类加载器:一种是启动类加载器(Bootstrap ClassLoader),这个类加载器使用C++语言实现,是虚拟机自身的一部分:另 ...

  8. Tomcat学习总结(1)——Tomcat入门教程

    一.打包JavaWeb应用 在Java中,使用"jar"命令来对将JavaWeb应用打包成一个War包,jar命令的用法如下: 范例:将JavaWebDemoProject这个Ja ...

  9. 文档数据库MongoDB

    MongoDB是一个基于分布式文件存储的文档式数据库.其由C++编写, 旨在为Web应用提供可扩展的高性能数据存储解决方案. MongoDB中每条数据记录被作为一个文档存储,文档由集合(collect ...

  10. the first blog in 2017——《论作为程序员的我考研》

    怎么说,人总是有了压力才有动力.想来如今已经是2017年2月13日,2017年已经使用了43天,距离成绩出来还有3天.这个过年是最不充实的一个年,也是时间长达一个月久的“寒假”,因为“考研”.至于考到 ...