我们都知道在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. 使用反射功能在Unity运行状态通过Inspector面板修改字段和调用方法

    使用反射功能在Unity运行状态通过Inspector面板修改字段和调用方法 效果展示 一个很简单的组件脚本 运行状态在Inspector面板可以随便修改字段和调用方法 方法调用日志 设计由来 最近在 ...

  2. [Leetcode]315.计算右侧小于当前元素的个数 (6种方法)

    链接 给定一个整数数组 nums,按要求返回一个新数组 counts.数组 counts 有该性质: counts[i] 的值是  nums[i] 右侧小于 nums[i] 的元素的数量. 示例: 输 ...

  3. Linux下ps -ef 和 ps aux的区别

    Linux下显示系统进程的命令ps,最常用的有ps -ef 和ps aux.这两个到底有什么区别呢?两者没太大差别,讨论这个问题,要追溯到Unix系统中的两种风格,System V风格和BSD 风格, ...

  4. linux 下 etc常用配置信息

    这些都是比较有实用性的系统配置,收藏下,以备不时之需!以下是etc下重要配置文件解释: 1./etc/hosts  #文件格式: IPaddress hostname aliases #文件功能: 提 ...

  5. ES代码总结2

    本文部分转载于: http://www.cnblogs.com/luxiaoxun/p/4869509.html ElasticSearch的基本用法与集群搭建  一.简介 ElasticSearch ...

  6. (转)pathlib路径库使用详解

    原文:https://xin053.github.io/2016/07/03/pathlib%E8%B7%AF%E5%BE%84%E5%BA%93%E4%BD%BF%E7%94%A8%E8%AF%A6 ...

  7. ASP.NET MVC 与NLog的使用

    NLog是一个.NET 下一个完善的日志工具,个人已经在项目中使用很久,与ELMAH相比,可能EAMAH更侧重 APS.NET MVC 包括调试路由,性能等方面,而NLog则更简洁. github: ...

  8. CentOS下使用crontab命令来定时执行任务

    原文地址:http://www.centoscn.com/CentOS/help/2015/0424/5261.html crontab命令 是用来让使用者在固定时间或固定间隔执行程序之用,换句话说, ...

  9. Spring学习--Spring事务相关速记

    数据库事务 事务特性: 原子性,事务是不可分割的最小工作单元,事务内的操作要么全做,要么全不做 一致性,在事务执行前数据库的数据处于正确的状态,而事务执行完成后数据库的数据还是处于正确的状态 隔离性, ...

  10. Chrome 开发工具之Timeline/Performance

    之前有说到Element,Console,Sources大多运用于debug,Network可用于debug和查看性能,今天的主角Timeline(现已更名Performance)更多的是用在性能优化 ...