好客租房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()应 ...
随机推荐
- Numpy和原生Python用于数组计算的性能对比
- SQL之创建表
1.创建表------ (方法一)-------create table Persons(id NUMBER, age NU ...
- 前端基础之CSS(1)
1.css3的新特性有哪些 (1)CSS3选择器(基本.属性.伪类具体见下) (2)CSS3边框与圆角 圆角border-radius 属性:border-top-left-radius 左上角 bo ...
- linux安装mongodb磁盘空间不足
Insufficient free space for journal filesPlease make at least 3379MB available in /export/servers/mo ...
- Android控件设置半透明+EditText设置默认值+ 控件居中
Android控件设置半透明 效果 代码: android:background="#50FFFFFF" 50表示50%透明 Android:EditText设置默认值 andro ...
- vux+vue-cli3.0坑
最近开发了项目使用了vue-cli3.0+vux搭建的项目,现在总结遇到的问题: 环境:github vux有关于vue-cli3.0以及vux已经搭建好的脚手架vux-cli3链接 一:如下报错 解 ...
- Rb(redis blaster),一个为 redis 实现 non-replicated 分片的 python 库
Rb,redis blaster,是一个为 redis 实现非复制分片(non-replicated sharding)的库.它在 python redis 之上实现了一个自定义路由系统,允许您自动定 ...
- 不仅仅是一把瑞士军刀 —— Apifox的野望和不足
声明:本文内容不涉及任何 Apifox 的功能介绍,一来网上这方面的文章已经汗牛充栋,二来 Apifox 本身的用户体验做的非常好,对于开发者而言学习成本基本为零. 阮一峰:不管你是前端开发还是后端开 ...
- Java学习day3
今天跟着b站up的视频学习了方法定义调用与重载,以及类的封装. Java中的方法与c++当中的函数类似,只是定义格式为: public static void 方法名(){ 方法体 } 上完课做实验的 ...
- 【面试普通人VS高手系列】HashMap是怎么解决哈希冲突的?
常用数据结构基本上是面试必问的问题,比如HashMap.LinkList.ConcurrentHashMap等. 关于HashMap,有个学员私信了我一个面试题说: "HashMap是怎么解 ...