<!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. bzoj 1621: [Usaco2008 Open]Roads Around The Farm分岔路口【dfs】

    模拟就行--讲道理这个时间复杂度为啥是对的??? #include<iostream> #include<cstdio> using namespace std; int k, ...

  2. NetCore Netty 框架 BT.Netty.RPC 系列随讲 —（前序） REST API 与 RPC 经典网络基础服务架构

    在服务体系架构内,我们所知道的,有两种请求模型: Http 请求模型,以及 RPC 请求模型.因此,在一个互联网请求模型架构上,都是这两种的请求模型的向互组合. 下面给出两种常见的互联网经典基础架构图 ...

  3. IDEA 激活方式

    最新的IDEA激活方式 使用网上传统的那种输入网址的方式激活不了,使用http://idea.lanyus.com/这个网站提供的工具进行 1.进入hosts文件中:C:\Windows\System ...

  4. 二分图最大匹配(匈牙利算法) POJ 3041 Asteroids

    题目传送门 /* 题意:每次能消灭一行或一列的障碍物,要求最少的次数. 匈牙利算法:把行和列看做两个集合,当有障碍物连接时连一条边,问题转换为最小点覆盖数==二分图最大匹配数 趣味入门:http:// ...

  5. MySql学习笔记(2)-简介

    一.什么是MySql MySql是开放源代码的数据库管理系统之一: MySql是一个支持多线程高并发多用户的关系型数据库管理系统: MySql最擅长的是查询性能,而不是事务处理(需要借助第三方存储引擎 ...

  6. 计算给定数组 arr 中所有元素的总和的几种方法

    1.forEach遍历: function sum(arr) {     var result = 0;     arr.forEach(function(item,index) {          ...

  7. JavaScript（十一）Dom

    Dom(Document object module) 1.获取dom对象的方法 正常用的方法 推荐 getElementById()//通过id选择唯一的dom getElementsByClass ...

  8. Python之数据规整化：清理、转换、合并、重塑

    Python之数据规整化:清理.转换.合并.重塑 1. 合并数据集 pandas.merge可根据一个或者多个不同DataFrame中的行连接起来. pandas.concat可以沿着一条轴将多个对象 ...

  9. Android基础TOP6_1:FrameLyayout和ImageView制作层叠图片

    Activity: <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns ...

  10. HTML5 页面调用微信接口

    参考微信微信官方文档JS_SDK:https://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html#JSSDK.E4.BD.B ...