好客租房25-react中的事件处理(事件对象)
3.2事件对象
可以通过事件处理程序的参数
React中的事件对象叫做:合成事件(对象)
合成事件:兼容所有浏览器
//导入react
import React from 'react'
import ReactDOM from 'react-dom'
//导入组件
import Hello from './Hello'
// 约定1:类组件必须以大写字母开头
// 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性
// 约定3:组件必须提供render方法
// 约定4:render方法必须有返回值
class HelloWorld extends React.Component {
handleClickPage=(e)=>{
e.preventDefault()
}
handleClick(){
console.log("geyao")
}
render() {
return (
<div>
<Hello></Hello>
<button onClick={this.handleClick}>点我</button>
<a onClick={this.handleClickPage}>geyao</a>
</div>
)
}
}
ReactDOM.render(<HelloWorld />, document.getElementById('root'))
好客租房25-react中的事件处理(事件对象)的更多相关文章
- React中的事件处理为什么要bind this?
个人总结: 问: 请给我讲一下React中的事件处理为什么要bind this? 答: 好的,比如说我写了一个类组件,有个onClick属性 ,onClick={ this.fun },如果不bind ...
- React中的合成事件
React中的合成事件 React自己实现了一套高效的事件注册.存储.分发和重用逻辑,在DOM事件体系基础上做了很大改进,减少了内存消耗,简化了事件逻辑,并最大程度地解决了IE等浏览器的不兼容问题. ...
- react第五单元(事件系统-原生事件-react中的合成事件-详解事件的冒泡和捕获机制)
第五单元(事件系统-原生事件-react中的合成事件-详解事件的冒泡和捕获机制) 课程目标 深入理解和掌握事件的冒泡及捕获机制 理解react中的合成事件的本质 在react组件中合理的使用原生事件 ...
- 好客租房24-react中的事件处理(事件绑定)
3.1事件绑定 React事件绑定语法和DOM事件语法相似 语法:on+事件名称={事件处理程序} 比如οnclick={()=>{}} //导入react import React f ...
- react 中的绑定事件
handleOpen = (e)=> { this.setState({ open: true }) } <Button color='primary' onClick={this.han ...
- react事件中的事件对象和常见事件
不管是在原生的js还是vue中,所有的事件都有其事件对象,该事件对象event中包含着所有与事件相关的信息,在react中,所有的事件也有其事件对象,在触发DOM上的某个事件时,就会产生一个事件对象. ...
- JavaScript 中的window.event代表的是事件的状态,jquery事件对象属性,jquery中如何使用event.target
http://wenda.haosou.com/q/1373868839069215 http://kylines.iteye.com/blog/1660236 http://www.cnblogs. ...
- JavaScript中冒泡与事件委托
冒泡 事件触发后事件流的三个阶段按顺序依次是: 1.捕获阶段 2.目标阶段 3.冒泡阶段 大盒子包裹小盒子,两个盒子都分别添加点击事件,当点击小盒子,两个盒子的事件都会触发. 事件委托 下级元素委托上 ...
- 从零开始学习jQuery (五) 事件与事件对象
本系列文章导航 从零开始学习jQuery (五) 事件与事件对象 一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解 ...
- jQuery入门(3)事件与事件对象
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
随机推荐
- char的越界赋值即其原理剖析
思考: int ch = 'A'; int ch1 = 65; int ch2 = 321; printf("%c %c %c\n", ch, ch1, ch2);的输出结果是什么 ...
- pandas数据读取
02. Pandas读取数据 本代码演示: pandas读取纯文本文件 读取csv文件 读取txt文件 pandas读取xlsx格式excel文件 pandas读取mysql数据表 1.读取纯文本文件 ...
- 初识JavaScript EventLoop
Event Loop指的是计算机系统的一种运行机制.JavaScript采用此机制解决单线程引发相关问题 在浏览器中的web应用会涉及到.JavaScript引擎.WebAPI.Event Loop. ...
- 获取iframe引入页面内的元素
在web开发中,经常会用到iframe,难免会碰到需要在父窗口中使用iframe中的元素.或者在iframe框架中使用父窗口的元素.js在父窗口中获取iframe中的元素1. 格式:window ...
- mysql find_in_set在oracle下的解决方案
比如一张表: artile (id,type,content); type:1表示文艺类,2表示小说类,3表示传记,4表示传说,等等5,6,7,8 表数据: id type content 1 3,1 ...
- JavaScript遍历表单元素
运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...
- java_类的访问控制符
1.分类: public protected default private是java中的访问控制修饰符. public String name; protected String name; Str ...
- 汇编语言实验1—Debug基础操作
1.使用Debug,将下面的程序段写入内存,逐条执行,观察每条指令执行后CPU中相关寄存器中内容的变化. 记录1:最后一条指令执行完BX=(4026)H,AL=(66)H,检验结果. 两种写入:e命令 ...
- MySQL Router重装后重新连接集群进行引导出现的——此主机中之前已配置过的问题
问题出现的前因: 因为重新安装了MySQL Router,然后打算重新连接上目标集群进行MySQL Router的初始化引导,结果报错了! [root@linux666 system]# mysqlr ...
- 苹果手机Safri浏览器 js 解析问题
低系统版本的苹果手机的浏览器存在很多JS问题 一 date 问题 1.new Date() {至少10.3版本已下存在这个问题} 苹果手机只能识别 new Date('2017/04/12') 这 ...