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. 复习——高级语法对象原型,es5新增语法

    今天的开始进入了js的高级语法 我马上也要复习完了,之前学到闭包递归,就回去复习去了,复都复习这么久而且,复习的过程真的比学知识的过程难熬的多,只不过终于要复习完了,再来点es6的新语法马上就要步入v ...

  2. Issues with position fixed & scroll(移动端 fixed 和 scroll 问题)

    转载请注明英文原文及译文出处 原文地址:Issues with position fixed & scrolling on iOS 原文作者:Remy Sharp译文地址:移动端 fixed ...

  3. java中什么叫多重捕获MultiCatch,它的用法是怎样的?

    2.多重捕获MultiCatch 马克-to-win:什么叫多重捕获MultiCatch?一段代码可能引起多个异常,这时可以定义两个或更多的catch子句来处理这种情况,每个子句捕获一种类型的异常.马 ...

  4. 大数据学习之路之sqoop导入

    按照网上的代码导入 hadoop(十九)-Sqoop数据清洗 - 简书 (jianshu.com) ./sqoop import --connect "jdbc:mysql://192.16 ...

  5. Column ‘name’ in where clause is ambiguous;

    内容 一.异常信息 严重: Servlet.service() for servlet [dispatcherServlet] in context with path [] threw except ...

  6. springAop必导jar包

    SpringAop:的底层就是通过JDK动态代理"或"CGLib动态代理为技术目标织入横切逻辑. 做aop:需要导入: spring-aop-4.1.5.RELEASE.jar s ...

  7. Python入门-多进程

    1.获取本机CPU # 早期的CPU是单核:实现多个程序并行,在某一时间点,其实只有一个进程 # 后来硬件多核CPU:多个进程是并行执行. from multiprocessing import cp ...

  8. Ubuntu 安装cmake

    Ubuntu 安装 cmake 官网 https://cmake.org 下载地址 https://cmake.org/download/ 参考文档 -<ubuntu下更新cmake版本> ...

  9. el-table高度问题

    1. 外层容器flex=1,el-table设置属性height="calc(100% - 60px),有时一刷新页面表格高度无限增加,滚动条一直变短 试验过几次后发现是因为el-table ...

  10. docker基础_docker镜像与分层

    docker镜像与分层 docker镜像由一些松耦合的制度镜像层组成 docker负责堆叠这些镜像层并将它们表示为单个统一的对象 当 docker image pull ubuntu:latest 时 ...