3.1事件绑定

React事件绑定语法和DOM事件语法相似

语法:on+事件名称={事件处理程序} 比如οnclick={()=>{}}

//导入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 {
        handleClick(){
            console.log("geyao")
        }
        render() {
            return (
                <div>
                    <Hello></Hello>
                    <button onClick={this.handleClick}>点我</button>
                </div>
            )
        }
    }
     
    ReactDOM.render(<HelloWorld />, document.getElementById('root'))

好客租房24-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. EasyUI datagrid 明细表格中编辑框 事件绑定 及灵活计算 可根据此思路 扩展其他

    原创 : EasyUI datagrid 明细表格中编辑框 事件绑定 及灵活计算 可根据此思路 扩展其他 转载,请注明出处哦!谢谢! 原创 : EasyUI datagrid 明细表格中编辑框 事件绑 ...

  5. jquery中的DOM事件绑定与解绑

    在jquery事件中有时候有的事件只需要在绑定后有效触发一次,当通过e.target判断触发条件有效触发后解除绑定事件,来避免多次无效触发和与未知情况造成冲突. 这时候就要用到了jquery中的事件绑 ...

  6. WPF中的Command事件绑定

    在项目中使用Command绑定能够使我们的代码更加的符合MVVM模式.不了解的同学可能不清楚,只有继承自ButtonBase类的元素才可以直接绑定Command(Button.CheckBox.Rad ...

  7. React中方法的this绑定

    第一种 在组件(类)的constructor中绑定this class Demo extends Component { constructor(this) { super(this) this.st ...

  8. vue中把一个事件绑定到子组件上

    官网上是这样描述的 你可能有很多次想要在一个组件的根元素上直接监听一个原生事件.这时,你可以使用 v-on的 .native 修饰符 父组件App.vue <template> <d ...

  9. React事件绑定与解绑

    React中事件分类 React中事件绑定分为两种: 1.直接添加在React元素上的事件,这是React在基于Virtual DOM的基础上实现的符合w3c规范的合成事件(SyntheticEven ...

随机推荐

  1. VueJs项目笔记

    ======================知识点总结=========================== 一.keep-alive(实现页面的缓存) 二. 移动端固定定位的解决方案 三. Vue表 ...

  2. react 实用项目分享-mock server

    使用react16+router4+mobx+koa2+mongodb做的mock平台 moapi-cli 本地工具版,一行命令 ,方便个人使用 安装 npm i moapi-cli -g 使用 mo ...

  3. css3属性之filter初探

    filter属性是css不常用的一个属性,但是用好了可以给网页增色不少!ps: IE不支持此属性: img { -webkit-filter: grayscale(100%); /* Chrome, ...

  4. 引用nodejs的url模块实现url路由功能

    我们在本地创建服务器之后需要写不同的后缀名来访问同一个站点的不同页面,如果不实现路由功能.则每次访问localhost:3000 不论后面写什么  比如localhost:3000/index.loc ...

  5. 申请百度翻译API

    申请百度翻译API 0x00 前期准备 百度账号 md5的相关知识 0x01 进入百度开放平台,登录你的百度账号 找到 产品服务 -> 通用翻译API 0x02 点击下面的立即使用按钮,注册成为 ...

  6. Git---git的常用操作

    git三种状态的转换 git状态切换时的常用命令 1. git管理工作目录 git init # 会增加.git文件夹 2. git的三种状态 工作区 暂存区 本地仓库 3. 提交到暂存区 git a ...

  7. Kubernetes构建云原生架构-图解

  8. oracle 11g rac集群 asm磁盘组增加硬盘

    创建asm磁盘的几种方式 创建asm磁盘方式很多主要有以下几种 1.Faking方式 2.裸设备方式 3.udev方式(它下面有两种方式) 3.1 uuid方式 3.2 raw方式(裸设备方式) 4. ...

  9. mysql4与mysql5的区别_MySQL 4.1/5.0/5.1/5.5/5.6各版本的主要区别

    MySQL 4.1/5.0/5.1/5.5/5.6各版本的主要区别 一.5.0 增加了Stored procedures.Views.Cursors.Triggers.XA transactions的 ...

  10. 使用 LOAD DATA LOCAL INFILE,sysbench 导数速度提升30%

    1. LOAD DATA INFILE 为什么比 INSERT 快? 2. sysbench 压测 MySQL 的四个标准步骤. 3. 怎么让 sysbench 支持 LOAD DATA LOCAL ...