React--- 事件的callback函数绑定的问题

在师父的指点下,开始React的学习。这个React很强大,生产可以复用的组件。开发效率很高,使用这个开发很规范,有流程。可以说是改变了传统的前端是个切图仔,使用它可以前后端开发分离。并行开发,效率很高。这个问题是今天第一次遇到。在事件中我绑定了一个函数,这看起来没有什么。很正常。。<div id="calendar" onClick={this.selectDate.bind(this)} >        {this.createCalendar()}</div>

变化在我在后面加个参数如下:
<div id="calendar" onClick={this.selectDate.bind(this,para)} >        {this.createCalendar()}</div>

这样的问题很严重,导致了事件冒泡时e.target 变成了未定义。一旦取消这个参数恢复如初。我还并不知道为什么,但是这个问题个人感觉值得注意,说明事件中bind会产生一些问题。其内部原因我还不知道。但是还是记录在这。如果有人,看到了知道为什么,麻烦请告知。不知道的话,还是别这样绑会很危险,出一些乱子。那就这样,先记着。如果我能解决,会有后续的。
时间: 2024-08-04 04:14:12

React--- 事件的callback函数绑定的问题的相关文章

React事件绑定总结

需要绑定的原因 ................................................................................................... 事件绑定目的,就是事件的作用域的转移. 问题是,react生成出来的组件,this还不能指向自身吗? <button onClick={this.plus}>plus</button> plus函数上的this,是事件响应时的上下文(window),并不是当前组件实例!

事件封装(多个函数绑定一个事件,估计这样解释不对)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <!-

事件函数绑定方式

1.赋值形式及其问题 1 document.onclick=fn; 2 document.onclick=fn1; 3 function fn(){alert(0)} 4 function fn1(){alert(1)} 这样做,第二次赋的值会替换掉第一次的值 ,点击时只会输出1 2.函数形式 所有IE:obj.attachEvent(事件名称,事件函数) a.没有捕获 b.事件名称有on c.事件执行顺序:标准IE正序,非标准倒序 d.事件函数中this指向window 标准下(IE9+):o

【REACT NATIVE 系列教程之三】函数绑定与FLEXBOX是用好REACT的基础

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2222.html Himi在写React 时主要遇到两个知识点觉得很有必要跟大家一起回顾下. 函数绑定 FlexBox 布局 一:函数绑定 首先来看一段代码片段: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 constructor(props) { super(props

事件封装(多个函数绑定一个事件,预计这样解释不正确)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <!-

为同一个元素绑定不同的事件指向同一个事件的处理函数

<input type="button" value="点击" id="btn"/><script src="commer.js"></script><script> //为同一个元素绑定不同的事件指向同一个事件的处理函数 ver("btn").onclick=f1; ver("btn").onmouseover=f1; ver("

react 框架中 事件的处理和绑定

1.准备工作,在src目录中新建一个header.js文件,如图所示 2.事件绑定用on+事件名: 第一种:普通的函数绑定 第二种:箭头函数 第三种:箭头函数传参 第四种 :函数不传参 在constructor中写入: 在render上面写函数 第五种:函数不传参 在render上面写入 第六种:函数传参数 第七种:函数传参,且改变改元素的内容 第八种: 原文地址:https://www.cnblogs.com/cnblogso/p/12193693.html

源码看React 事件机制

对React熟悉的同学都知道,React中的事件机制并不是原生的那一套,事件没有绑定在原生DOM上,发出的事件也是对原生事件的包装.那么这一切是怎么实现的呢? 事件注册 首先还是看我们熟悉的代码 <button onClick={this.autoFocus}>点击聚焦</button> 这是我们在React中绑定事件的常规写法.经由JSX解析,button会被当做组件挂载.而onClick这时候也只是一个普通的props.ReactDOMComponent在进行组件加载(moun

React事件

Event Handler ----React事件 React中的事件包括合成事件和原生事件,React底层对合成事件进行事件委派和手动绑定,原生事件的使用在高程3有具体讲解,难点在于跨浏览器兼容和DOM0/DOM2级事件处理程序的使用方法不同,这可以通过编写工具函数屏蔽浏览器差异,关于原生事件的描述在<Event Handler 事件处理程序 1>和<Event Handler 事件处理程序 2>中有详细解释. 合成事件:事件委派 React不会把事件处理函数直接绑定到真实的节点