好客租房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()应 ...
随机推荐
- [性能测试] locust学习-基础篇
在本文中,我将介绍一个名为Locust的性能测试工具.我将从Locust的功能特性出发,结合实例对Locust的使用方法进行介绍. 概述 Locust主要有以下的功能特性: 在Locust测试框架中, ...
- Clickhouse 纯手工迁移表
[应用场景] 由于一些未可知的原因,导致原表不可用,也不能恢复.通过手动迁移的方法来恢复业务 [解决办法] 新建一张 copy 表,把原表的 data 目录复制到新表的data 目录,并 attach ...
- C# 将Excel转为PDF时设置内容适应页面宽度
将Excel转为PDF格式时,通常情况下转换出来的PDF页面都是默认的宽度大小:如果Excel表格数据的设计或布局比较宽或者数据内较少的情况,转出来的PDF要么会将原本的一个表格分割显示在两个页面,或 ...
- sequelize模型
model表示数据库中的表,有时它也会被称为"模型"或"工厂".Model不能通过构造函数创建,只能通过sequlize.define方法来定义或通过sequl ...
- LeetCode刷题知识点总结——二叉树
二叉树 一.二叉树理论基础 1.满二叉树:如果一棵二叉树只有度为0的结点和度为2的结点,并且度为0的结点在同一层上,则这棵二叉树为满二叉树.通俗话理解:从底层开始到顶部的所有节点都全部填满的二叉树.深 ...
- centos6的yum源更新版本
概述 centos6系统从2020年12月1号开始不再维护,官方的yum源不再可用,同时国内的阿里云镜像和163镜像也都不再可用. 但是我们有一些老的服务器仍然在使用centos6系统版本,依赖库的安 ...
- 『现学现忘』Git基础 — 2、Git和SVN的区别
1.Git和SVN的区别 (1)SVN(集中式版本管理系统) 集中式的版本控制系统都有一个单一的集中管理的服务器,保存所有文件的修订版本,而协同工作的人们都通过客户端连到这台服务器,取出最新的文件或者 ...
- mongodb replication
官方文档:https://docs.mongodb.com/manual/replication/ 启动参数: 通过linux的包管理器(例如:yum)安装的mongodb会产生一个默认的配置文件:/ ...
- CAN总线收发节点设计
CAN总线收发节点设计 写在前面 这是微机接口的一个项目作业. 这段时间一直在宿舍隔离,没办法进行焊接和测试,但原理和代码已经在学习板子上经过验证. 设计目标 CAN在工业现场大量应用,尤其是汽车工业 ...
- alipay 当面付扫码支付实战开发
alipay 当面付扫码支付开发 参考官网地址:https://opendocs.alipay.com/open/194/105072 1.当面付介绍: 当面付包括付款码支付和扫码支付两种收款方式.适 ...