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

<!DOCTYPE>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <script src="./js/react.js"></script>

        <script src="./js/react-dom.js"></script>

        <script src="./js/browser.min.js"></script>

        <style>

            *{ margin:0px;  padding:0px;}

            .lists ul{ list-style:none; clear:both; }

            .lists ul li{ clear:; }

            .lists ul li img{ width:100px; }

            .lists ul li div:nth-child(1),.lists ul li div:nth-child(2),.lists ul li button{ float:left; }

            .lists ul li div:nth-child(2),.lists ul li button{ margin-left:30px; }

            .lists ul li button{ line-height:80px; height:80px; }

        </style>

    </head>

    <body>

        <div id="dome"></div>

        <script type="text/babel">

            var Fix = React.createClass({

                handleClick:function(){

                    alert('别老是点我');

                },

                render:function(){

                    return (

                        <div>

                            <h1>事件处理</h1>

                            <button onClick={this.handleClick}>GO</button>

                        </div>

                    );

                }

            });

            ReactDOM.render(

                <Fix />,

                document.getElementById('dome')

            );

        </script>

    </body>

</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. 关于多条id相同，只取其中一条记录的sql语句

    需要使用:分区函数用法(partition by 字段) select *,row_number() over(partition by item order by date  ) as index ...

  2. Windows 下安装使用docker swarm machine docker toolbox

    下载docker 集成安装环境 http://get.daocloud.io/#install-toolbox 这个网站很不错,下载 这个集成了 docker docker-machine ,还有gi ...

  3. [zt] Android中使用List列表

    原文地址:http://www.vogella.com/tutorials/AndroidListView/article.html 1. Android and Lists 1.1. Using l ...

  4. PL/SQL 导出dmp文件时发现表少了

    (1)查看日志,是否有如下提示信息: EXP-: no storage definition found , ) 解决方法: http://www.it165.net/database/html/20 ...

  5. Oracle RAC的日志体系

    Oracle Clusterware 不像数据库那样,有丰富的视图.工具可以用来辅助诊断,它的日志和trace文件是唯一的选择.但不像Oracle只有alert日志和几种trace文件,Oracle ...

  6. Learn ZYNQ Programming(1)

    GPIO LED AND KEY: part1:gpio leds and gpio btns combination. (include 1~4) part2:use gpio btns inter ...

  7. ngrok访问外网

    1. 外网映射工具介绍 windows用户: 1,下载windows版本的客户端,解压到你喜欢的目录2,在命令行下进入到path/to/windows_386/下3,执行 ngrok -config= ...

  8. java中的反射

    1.何为java反射机制: 在运行过程中,对于任意一个类都能够知道这个类的属性和方法:对于任意一个对象都能调用其属性和方法:这种动态获取信息和动态调用方法 就称为java反射 2.获取Class对象的 ...

  9. CSS学起来并不难

    CSS CSS学起来并不难,但在大型项目中,就变得难以管理,特别是不同的人在CSS书写风格上稍有不同,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的CSS代码原则: 1. 使用Reset但并非 ...

  10. response的Writer输出数据的问题

    package cn.itcast.response; import java.io.IOException; import java.io.OutputStream; import java.io. ...