<!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;}

        </style>

    </head>

    <body>

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

        <div id="test"></div>

        <script type="text/babel">

            var Fix = React.createClass({

                handleClick:function(){

                    alert('这么听话啊');

                },

                handleMouseOver:function(){

                    alert('喂你想干嘛？');

                },

                handleMouseOut:function(){

                    alert('吓得我一身冷汗');

                },

                render:function(){

                    return(

                        <div>

                            <h1>test</h1>

                            <img src="./images/jj.png" onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut} /> <br /><br />

                            <button onClick={this.handleClick}>有种你就点我</button>

                        </div>

                    );

                }

            });

            ReactDOM.render(

                <Fix />,

                document.getElementById('dome')

            );

        </script>

    </body>

</html>

夺命雷公狗-----React---14--移入移出事件的更多相关文章

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

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

  2. 夺命雷公狗—angularjs—14—$location的作用

    废话不多说看下,我们直接来走代码看下效果如何 <!DOCTYPE html> <html lang="en"> <head> <meta ...

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

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

  4. 夺命雷公狗-----React---12--添加类和样式

    <!DOCTYPE> <html> <head> <meta charset="utf-8"> <title></ ...

  5. 夺命雷公狗-----React---11--添加css样式的方法

    <!DOCTYPE> <html> <head> <meta charset="utf-8"> <title></ ...

  6. 夺命雷公狗-----React---10--组建嵌套进行数据遍历

    先写一个组建... 然后进行嵌套.. <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  7. 夺命雷公狗-----React---9--map数据的遍历

    比如我们要实现的是这种效果: 用这种方法来写,她只能写死在哪,没啥意思,所以我们定义一个数据,然后来测试下map方法对她遍历出来的数据 <!DOCTYPE html> <html l ...

  8. 夺命雷公狗-----React---8--react官方提供的组建实现双向绑定

    首先要引入她.. <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  9. 夺命雷公狗-----React---7--组建的状态props和state

    props:组建初始要渲染的数据,他是不可以改变的 state:组建状态发生改变,调用render重新渲染数据 我们来写一个例子: <!DOCTYPE html> <html lan ...

  10. 夺命雷公狗-----React---6--props多属性的传递

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

随机推荐

  1. 【Redis】简介与安装

    Linux 安装 [root@redis ~]# wget http://download.redis.io/releases/redis-2.8.19.tar.gz 解压缩redis[root@ha ...

  2. websocket 实现聊天功能

    <html> <head> <base href="<%=basePath%>"> <title>webscoket t ...

  3. bzoj1745: [Usaco2005 oct]Flying Right 飞行航班（贪心+map）

    之前做过一道基本一样的题目,抽象出来就是有个容量为c的载体,一些线段上某个点到另一个点要运输w个东西,求从头到尾最多能运多少东西. 这种模型可以用贪心做,用map,map[r]表示r的那个点,我们准备 ...

  4. 榮耀6 Plus將是一部沒有對手的手機

    華為榮耀官方微博發佈消息正式確定了年度旗艦新品將命名為榮耀6 Plus,據稱,該機將是“2014年度最最旗艦手機”,並將集“科學與美學一身”.“探索幾何與視覺極限”,同時,官方微博還不低調地宣稱該機將 ...

  5. mysql 创建索引和删除索引

    索引的创建可以在CREATE TABLE语句中进行,也可以单独用CREATE INDEX或ALTER TABLE来给表增加索引.删除索引可以利用ALTER TABLE或DROP INDEX语句来实现. ...

  6. 用css实现网站切角效果 使用css3属性:渐变

     都是大量的练习,老师练习乒乓球花了大量时间,十万次一个动作的重复,高中班主任说过,世上没有天才,只是重复的次数多了,自然被认作了天才,小小班的学生之所以厉害是因为他们重复一个知识点次数多,所以没有一 ...

  7. web网站获取客户端mac地址

    <HTML><HEAD><TITLE>WMI Scripting HTML</TITLE> <META http-equiv=Content-Ty ...

  8. 转 Netflix OSS、Spring Cloud还是Kubernetes? 都要吧！

    Netflix OSS.Spring Cloud还是Kubernetes? 都要吧! http://www.infoq.com/cn/articles/netflix-oss-spring-cloud ...

  9. Linux下browser-sync无法启动Chrome的解决方法

    笔者的环境: OS: Ubuntu Linux Browser: Chrome, Firefox 每次希望启动chrome浏览器,系统都会报错: browser-sync start -s --dir ...

  10. 项目在vs中打开后识别不出来ashx页面的解决方法

    在web.config配置文件中指定页面版本 <add key="webPages:Version" value="2.0"/> <?xml ...