在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. Flex Vector使用(转)

    从前(Flex SDK 4.0 以前版本)创建 Vector 实例一定要如下所示,这样的语法使我们在构造 Vector 对象时无法指定元素: var v:Vector.<T> = new ...

  2. Highcharts用函数动态填充静态值

    这种方式适用于其他动态函数模式 series: [{ name: 'Random data', data: (function() { // generate an array of random d ...

  3. docker 报错Failed to start Docker Storage Setup. 的处理基本都是容器满了

    :: localhost docker-storage-setup: Volume group extents): required. Apr :: localhost systemd: docker ...

  4. GO语言练习：struct基础练习

    1.代码 2.运行 1.代码 package main import "fmt" type Rect struct { x, y float64 width, height flo ...

  5. C# 窗体位置 Show和ShowDialog（转）

    CenterParent 窗体在其父窗体中居中. CenterScreen 窗体在当前显示窗口中居中,其尺寸在窗体大小中指定. Manual 窗体的位置由 Location 属性确定. Windows ...

  6. Connect is a middleware layer for Node.js

     Connect is a middleware layer for Node.js   http://senchalabs.github.com/connect Connect Connect is ...

  7. Hashtable在ViewState中无法增加值

    在我调试程序的时候,我发现WebForm 2.0和MVC3解析ViewState的方式不同,同样的代码,在Weorm中管用,在MVC中不起作用. private Hashtable ht { get ...

  8. ckedit 文本编辑器

    Ckeditor是一个功能非常强大的富文本编辑器,博客园有使用此编辑器,其功能完全可以与MS的Word媲美. 用起来也非常方便.下面是本人总结的安装步骤: 第一步,从http://ckeditor.c ...

  9. 在html中如何获取表单提交的数据

    a.html: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www ...

  10. B-树的插入、查找、删除

    转自:http://blog.163.com/zhoumhan_0351/blog/static/39954227200910231032917/ 前面讨论的查找都是内查询算法,被查询的数据都在内存. ...