我们都知道在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. 配置django图片上传与保存展示

    近来在研究django,发现有好多好玩的功能,比如图片上传,以前处理这个比较麻烦,现在我们来看看如何来处理图片上传与保存 1.在数据库设计的时候需要配置upload_to image = models ...

  2. tkinter之Frame

    tkinter的Frame即容器,在容器内部好像不能再嵌套一个Frame.

  3. OS之内存管理 --- 虚拟内存管理(一)

    虚拟内存的背景 在基本的内存管理策略中,所有的策略的相同点都是:每个进程在执行之前需要完全处于内存中.那有没有一种方法可以不需要将进程所有页面加载到内存中就可以开始运行进程呢?有没有可能在进程需要某些 ...

  4. POJ 2562

    #include<iostream> #include<algorithm> #define MAXN 15 using namespace std; //int rec[MA ...

  5. CentOS 6(64-bit) + Nginx搭建静态文件服务器

    Nginx搭建静态文件服务器 使用命令打开Nginx配置文件: sudo vim /etc/nginx/conf.d/default.conf 将配置改为: server { ...... ..... ...

  6. SSH远程连接Ubuntu Server

    Ubuntu默认没有安装openssh-server包,故从远程计算机通过SSH连接时会收到Connection refused的消息. 首先在Ubuntu检查/etc/ssh/sshd_config ...

  7. sizeof()与Marshal.SizeOf()的不同

    在.NET中一般都是通过sizeof()或Marshal.SizeOf()来获取数据类型的大小,来简要地看一下它们二者有何不同. sizeof() sizeof()在MSDN中的介绍是,在编译时获得一 ...

  8. Flexbox指南

    Flexbox布局(Flexible Box)模块旨在提供一个更加有效的方式制定.调整和分布一个容器里的项目布局,即使他们的大小是未知或者是动态的.(这里我们称为Flex). Flex布局主要思想是让 ...

  9. 公共技术点( Java 反射 Reflection)

    转载路径:http://p.codekk.com/blogs/detail/5596953ed6459ae7934997c5 本文为 Android 开源项目源码解析 公共技术点中的 Java 反射 ...

  10. springboot 多模块 -- 将web拆分出去 - 流动计算架构

    前言: 之前将各层都拆分出去, 作为一个独立的可替换的子模块. 感觉比以前确实是灵活了一些. 不管是电商项目, 还是现在公司做的项目, 其中, 有很多的业务逻辑, 都是一样的, 但是由于不在一个系统中 ...