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中的事件处理(事件对象)的更多相关文章

  1. React中的事件处理为什么要bind this?

    个人总结: 问: 请给我讲一下React中的事件处理为什么要bind this? 答: 好的,比如说我写了一个类组件,有个onClick属性 ,onClick={ this.fun },如果不bind ...

  2. React中的合成事件

    React中的合成事件 React自己实现了一套高效的事件注册.存储.分发和重用逻辑,在DOM事件体系基础上做了很大改进,减少了内存消耗,简化了事件逻辑,并最大程度地解决了IE等浏览器的不兼容问题. ...

  3. react第五单元(事件系统-原生事件-react中的合成事件-详解事件的冒泡和捕获机制)

    第五单元(事件系统-原生事件-react中的合成事件-详解事件的冒泡和捕获机制) 课程目标 深入理解和掌握事件的冒泡及捕获机制 理解react中的合成事件的本质 在react组件中合理的使用原生事件 ...

  4. 好客租房24-react中的事件处理(事件绑定)

    3.1事件绑定 React事件绑定语法和DOM事件语法相似 语法:on+事件名称={事件处理程序} 比如οnclick={()=>{}} //导入react     import React f ...

  5. react 中的绑定事件

    handleOpen = (e)=> { this.setState({ open: true }) } <Button color='primary' onClick={this.han ...

  6. react事件中的事件对象和常见事件

    不管是在原生的js还是vue中,所有的事件都有其事件对象,该事件对象event中包含着所有与事件相关的信息,在react中,所有的事件也有其事件对象,在触发DOM上的某个事件时,就会产生一个事件对象. ...

  7. JavaScript 中的window.event代表的是事件的状态,jquery事件对象属性,jquery中如何使用event.target

    http://wenda.haosou.com/q/1373868839069215 http://kylines.iteye.com/blog/1660236 http://www.cnblogs. ...

  8. JavaScript中冒泡与事件委托

    冒泡 事件触发后事件流的三个阶段按顺序依次是: 1.捕获阶段 2.目标阶段 3.冒泡阶段 大盒子包裹小盒子,两个盒子都分别添加点击事件,当点击小盒子,两个盒子的事件都会触发. 事件委托 下级元素委托上 ...

  9. 从零开始学习jQuery (五) 事件与事件对象

    本系列文章导航 从零开始学习jQuery (五) 事件与事件对象 一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解 ...

  10. jQuery入门(3)事件与事件对象

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

随机推荐

  1. 安装TypeScript

    安装TypeScript 创建工程文件夹:mkdir <project folder> 进入工程文件夹:cd <project folder> 快速创建程序包:npm init ...

  2. 如何形成一个完整的HTML对象

    写在前面,本文将同步发布于Blog.掘金.segmentfault.知乎等处,如果本文对你有帮助,记得为我得到我的个人技术博客项目给个star哦. 为何写这篇文章? 你可能做Web开发已经有一段时间, ...

  3. ES6-11学习笔记--函数的参数

    参数的默认值 与解构赋值结合 length属性 作用域 函数的name属性   ES5设置函数参数默认值: function foo(x, y) { y = y || 'world'; console ...

  4. 多态polymorphism,向上转型和动态方法调度有什么用?

    多态有什么用?马 克  -   t   o - w   i  n:https://blog.csdn.net/qq_44639795/article/details/103117332我给大家想了两个 ...

  5. Android开发小经验

    1. TextView中的getTextSize返回值是以像素(px)为单位的, 而setTextSize()是以sp为单位的. 所以如果直接用返回的值来设置会出错,解决办法是 用setTextSiz ...

  6. python---单链表的常用操作

    class Node(object): """结点""" def __init__(self, data): self.data = dat ...

  7. 查域名对应ip,测试端口是否可访问通

    根据命令查询软件包名称 yum provides */nslookup 根据域名解析ip nslookup 域名 示例:nslookup smtp.163.com 测试端口 telnet ip 端口 ...

  8. Java学习day8

    今天学习了package,import,final,static和多态 package可以理解为文件夹,因为有些类可能重名,如果在同一个目录下就无法正常实现,所有需要有不同的包来装对应的类 Java出 ...

  9. 原生微信小程序里类似于计算属性写法

    可直接在wxml文件里直接写入直接调用.变量只支持var命名,不支持let const     </view>     <view class="wx_bgc"  ...

  10. Codeforces Round #710 (Div. 3) Editorial 1506A - Strange Table

    题目链接 https://codeforces.com/contest/1506/problem/A 原题 1506A - Strange Table Example input 5 1 1 1 2 ...