React事件中遇到的一个小坑

一个点击按钮数字加1的小程序，我在第一次看书中的这段代码的时候，第一眼我就对this.handleClick = this.handleClick.bind 这句话表示有点疑问，类中handleClick 方法不是定义在原型对象中的嘛，实例对象显示地调用方法this不应该就是指向对象自身吗,再添这句话岂不是多此一举

直到我上手去敲了一遍示例代码，特意把上面这句话删除发现点击按钮的时候报错，undefined没有setState这个属性，这就很奇怪了呀...是不是应该this.handleClick() 呀，想到在vue.js中, 函数没有参数的情况下如@click="handleClick" 和@click="handleClick()" 是一样的。然后试了下，直接报错“Maximum update depth exceeded”...原来此时它会直接运行这个函数而不是在点击button 的时候调用。

理了理头绪，大概是这样，在不加()的情况下，是会在点击的时候执行这个函数，但此时只是事先指明了这个事件处理程序，点击button的时候是调用handleClick() 这个方法而不是调用this.handleClick() ,这个this 的作用只是为找到handleClick ,否则会报错handleClick is not defined..

那还有什么办法可以不用在构造方法中将方法的this重新指向呢？看下图

我们可以在this.handleClick()外层再嵌套一个函数，在点击的时候触发这个函数，然后再在函数中执行this.handleClick() 语句

原文地址：https://www.cnblogs.com/guanine/p/9269744.html

时间： 2024-08-24 22:18:24

React事件中遇到的一个小坑的相关文章

go的变量redeclare的问题，golang的一个小坑

go的变量声明有几种方式: 1 通过关键字 var 进行声明 例如:var i int   然后进行赋值操作 i = 5 2 最简单的,通过符号 := 进行声明和赋值 例如: i:=5 golang会默认它的类型 下面看一段代码,我们先声明一个变量a,然后再重新声明变量a,b,在这个函数中,变量a被声明了2次,成为a的重声明(redeclare),执行结果为23 package main import ( "fmt" ) func main(){ a:=1 a,b:=2,3 fmt.P

python-django中使用事务以及小坑

django中使用事务 一.导入事务模块 from django.db import transaction 二.对相应的业务进行事务操作 方式一:为整个函数进行事务操作 @transaction.atomic def mysql_test(): '''该函数进行一些关于数据库的操作''' pass 方式二:为部分代码进行事务操作 # 视图函数 def mysql_test(request): try: with transaction.atomic(): # 一系列对数据库的操作 pass e

CI load->view（）;的一个小坑。。。

CI load->view()  很智能,如果加载多个视图  他会全部读完再按顺序载入所有视图 但这里有一个小坑,底层会遍历你的函数,看有多少视图 再决定当前的视图是否为最后一个, 如果你的代码中有die exit这个的语句, 这个遍历就会被近中止, 所有的视图就都不会执行 切记 切记.. 如果想要中断这种机制,  直接执行视图,不执行下面的语句, : 加上$this->output->_display();就好了 但是这样就会失去灵活性. 谨慎用.

post到https的一个小坑

一个小坑,坑了我半天时间 本地用的是.net2.0,post按照正常的httpwebrequest方式写没有问题,但是发布到服务器上是.net4.0,于是开始报错“基础连接已关闭:发送时发生错误”. 做了几个修改,于是成功. 1.添加TLS 2.添加httpversion11 3.url改为IP地址(这个不确定有没有关系) post方法如下: ///zhhprivate string Post(string url, string json) { System.Net.HttpWebReques

yii计划任务中使用memcache一个小问题

在主程序里使用memcache存储了键值,Yii::app()->memcache->set("key", $value, 600); 在主程序里任何地方都可以使用Yii::app()->memcache->get("key");获取到 由于项目需要,需要建立计划任务执行一些动作,所以我也使用了yii的计划任务功能 很恶心的发现Command里写的代码获取不到memcache的信息,最后发现是键的keyprefix问题 解决办法一:在main

关于sniff函数的一个小坑

最近在用scapy模块写一个关于WiFi的脚本时用到sniff函数,其中遇到了一个小坑,记录如下: sniff函数是在指定网卡上每次嗅探到一个数据包后然后将它传给prn指定的函数. 原文地址:https://www.cnblogs.com/erfze/p/10090910.html

可能你不知道的字符串中的一个小坑！！！

简单的记录一个小问题,一直居然都没怎么注意,心底对自己深深的说了一句:"你真菜"! 平时日常我们接触到的数组去重太常见了.然后对于字符串的去重,也是可能用的IndexOf.或者转成数组去查重,然后再转换回来! 在尝试用其他方法的时候遇见一个小问题,在此记录下来与大家分析! var str = '521213756406'; for(var i = 0; i < str.length-1;i++){ for(var j = i+1;j < str.length; j++){

VB.NET开发中遇到的一个小问题

在修改公司用vb.net的写的代码时,遇到一个小问题 页面上有一个button, ID是btnNext, 在属性页中,它的click事件对应的是cmdNext, 我像在c#中一样,在属性页中双击cmdNext,自动进入.vb后台代码,产生事件 Protected Sub cmdNext(sender As Object, e As System.EventArgs) Handles btnNext.Click //一些处理代码 End Sub 运行debug调试时,发现这个代码会执行两次,怎么都

js变量提升的一个小坑

好久没写博客了,原本想实训结束能对整个实训项目认真总结一下,没想到回到学校一点都不轻松,最近在制作网页版简历,遇到了一个小问题,现在不总结以后肯定忙得顾不上,所以长话短说,抓紧时间写下来. 对js语法比较熟的同学可能都知道:js是没有块级作用域的,有一个新手很容易出错的地方 for(var i = 0 ; i < 10 ; i ++){ setTimeout(function(){ console.log(i) },1000*i) } 这段代码会输出10个10,而不是期望的1,2,...,10,