在react中事件监听直接作为组建的属性来添加即可，就像DOM中的html操作

  1. <!DOCTYPE>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <script src="./js/react.js"></script>
  7.         <script src="./js/react-dom.js"></script>
  8.         <script src="./js/browser.min.js"></script>
  9.         <style>
  10.             *{ margin:0px;  padding:0px;}
  11.             .lists ul{ list-style:none; clear:both; }
  12.             .lists ul li{ clear:; }
  13.             .lists ul li img{ width:100px; }
  14.             .lists ul li div:nth-child(1),.lists ul li div:nth-child(2),.lists ul li button{ float:left; }
  15.             .lists ul li div:nth-child(2),.lists ul li button{ margin-left:30px; }
  16.             .lists ul li button{ line-height:80px; height:80px; }
  17.         </style>
  18.     </head>
  19.     <body>
  20.         <div id="dome"></div>
  21.         <script type="text/babel">
  22.             var Fix = React.createClass({
  23.                 handleClick:function(){
  24.                     alert('别老是点我');
  25.                 },
  26.                 render:function(){
  27.                     return (
  28.                         <div>
  29.                             <h1>事件处理</h1>
  30.                             <button onClick={this.handleClick}>GO</button>
  31.                         </div>
  32.                     );
  33.                 }
  34.             });
  35.             ReactDOM.render(
  36.                 <Fix />,
  37.                 document.getElementById('dome')
  38.             );
  39.         </script>
  40.     </body>
  41. </html>

夺命雷公狗-----React---13--事件监听的更多相关文章

  1. 夺命雷公狗—angularjs—20—$watch监听的用法

  2. [技术博客]react native事件监听、与原生通信——实现对通知消息的响应

    在react native中会涉及到很多页面之间的参数传递问题.静态的参数传递通常利用组件的Props属性,在初始化组件时即可从父组件中将参数传递到子组件中.对于非父子关系的组件来说,无法直接传递参数 ...

  3. react入门----事件监听

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 夺命雷公狗—angularjs—13—post参数的接收发送

    我们强悍的angularjs为我们不仅仅提供了他的get接收方式,而且也有post的接收方式,我们现在做一个模拟接收后端传递过来的json的数据: <?php $arr = ['user'=&g ...

  5. React.js 小书 Lesson9 - 事件监听

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson9 转载请注明出处,保留原文链接和作者信息. 在 React.js 里面监听事件是很容易的事情 ...

  6. 夺命雷公狗---微信开发17----自定义菜单的事件推送，响应菜单的CLICK

    废话不多说,index.php 代码如下所示: <?php /** * wechat php test */ //define your token require_once "com ...

  7. react native 之 事件监听 和 回调函数

    同原生一样,react native 同样也有事件监听和回调函数这玩意. 场景很多,比如:A界面push到B界面,B界面再pop回A界面,可以给A界面传值或者告诉A刷新界面. 事件监听 事件监听类似于 ...

  8. React 函数组件中对window添加事件监听resize导致回调不能获得Hooks最新状态的问题解决思路

    React 函数组件中对window添加事件监听resize导致回调不能获得Hooks最新状态的问题解决思路 这几天在忙着把自己做的项目中的类组件转化为功能相同的函数组件,首先先贴一份该组件类组件的关 ...

  9. 夺命雷公狗—angularjs—18—angularjs的事件

    对于一款前端框架,提起事件,很容易让人联想到DOM事件,比如说鼠标点击以及页面滚动等.但是我们这里说的angular中的事件和DOM事件并不是一个东西. 事件的发布 我们可以通过 $emit() 以及 ...

随机推荐

  1. display：inline、block、inline-block 的区别

    一.块级元素 与  行级元素 要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫 ...

  2. Hibernate检索策略之延迟加载和立即加载

    延迟加载:延迟加载(lazy load懒加载)是当在真正需要数据时,才执行SQL语句进行查询.避免了无谓的性能开销. 延迟加载分类:  1.类级别的查询策略 2.一对多和多对多关联的查询策略 3.多对 ...

  3. thinkphp框架3.2的cookie删除问题记录

    在使用框架删除cookie时,发现cookie(null)不起作用.后来查看官网相关信息,看到了讨论http://www.thinkphp.cn/bug/2602.html

  4. 判断两个IP是否属于同一子网

    描述 子网掩码是用来判断任意两台计算机的IP地址是否属于同一子网络的根据.子网掩码与IP地址结构相同,是32位二进制数,其中网络号部分全为“1”和主机号部分全为“0”.利用子网掩码可以判断两台主机是否 ...

  5. jquery_DOM操作

    DOM操作:DOM Core(核心),HTML_DOM,CSS_DOM CSS_DOM操作: css()获取或添加样式 opacity()透明设置 height()高度值 width()宽度 offs ...

  6. 外部引用JavaScript文件乱码问题

    使用js外部文件输出中文乱码解决: 将js文件编码改为和页面的编码相同.

  7. BizTalk开发系列(二十) 类型作用域

    Orchestration中的Type概念跟.NET 里的Class一样,可以在Orchestration开过过程中将多个实例绑定到一种类型.Orchestration 视图里包括的类型有Port T ...

  8. 详解 Python 中的下划线命名规则

    在 python 中,下划线命名规则往往令初学者相当 疑惑:单下划线.双下划线.双下划线还分前后……那它们的作用与使用场景 到底有何区别呢?今天 就来聊聊这个话题. 1.单下划线(_) 通常情况下,单 ...

  9. IOS第15天(1,事件处理View的拖拽）

    *******view 一些方法 #import "HMView.h" @implementation HMView // 一个完整的触摸过程 // touchesBegan -& ...

  10. swift 2.x学习笔记(一)

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #008400 } p.p2 { margin: 0.0px 0. ...