<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <!-- react核心库 -->

     <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>

     <!-- 提供与dom相关的功能 -->

     <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>

     <!-- 将es6代码转换为es5语法格式 -->

     <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>

 </head>

 <body>

     <div id="container"></div>

     <script type="text/jsx">

     var TestClickComponent = React.createClass({

         handleClick: function (event) {

             var tipE = ReactDOM.findDOMNode(this.refs.tip)

             if(tipE.style.display === 'none') {

                 tipE.style.display = 'inline'

             } else {

                 tipE.style.display = 'none'

             }

             <!-- 阻止浏览的冒泡事件和默认行为 -->

             event.stopPropagation()

             event.preventDefault()

         },

         render: function () {

             return (

                 <div>

                     <button onClick={this.handleClick}>显示|隐藏</button><span ref="tip">测试点击</span>

                 </div>

             )

         }

     })

     var TestInputComponent = React.createClass({

     <!-- getInitialState使用用来初始化state的状态的-->

         getInitialState: function () {

             return {

                 inputContent: ''

             }

         },

         changeHandler: function(event) {

         <!-- this.setState是用来修改state的状态 -->

             this.setState({

                 inputContent: event.target.value

             })

         },

         render: function () {

             return(

                 <div>

                     <!-- 这里是通过驼峰试的命名来绑定事件，例如onClick，onChange等等，他们的的值是一个js表达式-->

                     <input type="text" onChange={this.changeHandler}/><span>{this.state.inputContent}</span>

                 </div>

             )

         }

     })

     ReactDOM.render(

         <div>

             <TestClickComponent/>

             <br/>

             <br/>

             <TestInputComponent/>

         </div>,document.getElementById('container'));

     </script>

 </body>

 </html>

react入门----事件监听的更多相关文章

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

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

  2. 4.pygame快速入门-事件监听

    事件event:游戏启动后,用户针对游戏的所有操作 监听:在游戏循环中,判断用户的具体操作 pygame中通过pygame.event.get()可以获得当前用户所做动作的事件列表   事件监听 wh ...

  3. SpringBoot事件监听机制及观察者模式/发布订阅模式

    目录 本篇要点 什么是观察者模式? 发布订阅模式是什么? Spring事件监听机制概述 SpringBoot事件监听 定义注册事件 注解方式 @EventListener定义监听器 实现Applica ...

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

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

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

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

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

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

  7. SpringBoot入门之事件监听

    spring boot在启动过程中增加事件监听机制,为用户功能拓展提供极大的便利,sptingboot支持的事件类型有以下五种: ApplicationStartingEvent Applicatio ...

  8. Java中用得比较顺手的事件监听

    第一次听说监听是三年前,做一个webGIS的项目,当时对Listener的印象就是个"监视器",监视着界面的一举一动,一有动静就触发对应的响应. 一.概述 通过对界面的某一或某些操 ...

  9. Node.js 教程 05 - EventEmitter(事件监听/发射器 )

    目录: 前言 Node.js事件驱动介绍 Node.js事件 注册并发射自定义Node.js事件 EventEmitter介绍 EventEmitter常用的API error事件 继承EventEm ...

随机推荐

  1. bzoj3612 [Heoi2014]平衡——整数划分

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3612 看了好久才弄清楚题意... 原来整数划分就是这样的啊:https://blog.csd ...

  2. bzoj2466

    高斯消元+搜索 很明显每个开关只能按一次,那么我们可以想到高斯消元,其实就是解异或方程组,但是最后会有一些自由元,也就是有x+y=z,x+y=z这种一样的方程就会产生自由元,那么我们爆搜自由元取值,每 ...

  3. bzoj 1093: [ZJOI2007]最大半连通子图【tarjan+拓扑排序+dp】

    先tarjan缩成DAG,然后答案就变成了最长链,dp的同时计数即可 就是题面太唬人了,没反应过来 #include<iostream> #include<cstdio> #i ...

  4. P2252 取石子游戏

    传送门 威佐夫博弈结论:若石子数为\(a,b(a<b)\),当且仅当\((y-x)*\frac{(\sqrt{5}+1)}{2}=x\)的时候先手必败 证明 //minamoto #includ ...

  5. spring data elasticsearch的 @Documnet 和 @Field 注解

    @Documnet 注解 public @interface Document { String indexName(); //索引库的名称,个人建议以项目的名称命名 String type() de ...

  6. python自动化测试学习笔记-8单元测试unittest模块

    官方参考文档:http://docs.python.org/2.7/library/unittest.html unittest是一个python版本的junit,junit是java中的单元测试框架 ...

  7. markdown 常用语法总结 - 个人版

    这里并不是要总结所有的 markdown 语法,只是总结笔者自己撰写博客时常用的一些 markdown 语法. 1 图片设置 1.1 设置图片位置 利用markdown在编写文档时插入图片是默认靠左, ...

  8. 2017 ACM-ICPC 亚洲区（南宁赛区）网络赛 Minimum Distance in a Star Graph

    In this problem, we will define a graph called star graph, and the question is to find the minimum d ...

  9. 24 C#的类和对象

      类是C#面向对象编程的基本单元.一个类都可以包含2种成员:字段和方法. 1)类的字段代表类中被处理的数据(变量): 2)类的方法代表对这些数据的处理过程或用于实现某种特定的功能,方法中的代码往往需 ...

  10. lua_protobuf

    http://www.cocoachina.com/bbs/read.php?tid-227404.html