<!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. JQuery操作下拉框

    转载自下面的链接,很有用的. http://www.cnblogs.com/yrhua/archive/2012/11/04/2753571.html 要实现这种效果: HTML代码 <scri ...

  2. [App Store Connect帮助]六、测试 Beta 版本（2）输入测试信息以供外部测试

    如果您向外部测试员分发您的 App,您需要输入关于您 App 的额外 TestFlight 测试信息以供“Beta 版 App 审核”.您可以在添加 App 至您的帐户时,或在您邀请外部测试员时输入此 ...

  3. 基于.Net Core的API框架的搭建（3）

    5.加入缓存支持 我们希望为项目增加缓存支持,我们选择Redis做为缓存数据库. 首先,我们在Services目录增加一个缓存接口类ICacheService: using System; using ...

  4. [IOI1998]Polygon

    很早就看到这题了...但因为有个IOI标志,拖到现在才做 由于是以前在书上看到的,就没有想过其他算法,直接区间DP了... 方程式也挺好想的 跟我们平时做数学题求几个数乘积最大差不多 最大的*最大的 ...

  5. FJOI2019退役记

    day1 不意外地一点都不紧张,早就感觉没有机会了吧 进场非常从容地读完了三道题,开始写t1暴力,接着就开始自闭,不知道该开t2还是t3,最后先开了t3,想了想这不是选两条不相交的链吗,这个暴力不是林 ...

  6. 状压DP UVA 11795 Mega Man's Mission

    题目传送门 /* 题意:洛克人有武器可以消灭机器人,还可以从被摧毁的机器人手里得到武器,问消灭全部机器人的顺序总数 状态压缩DP:看到数据只有16,就应该想到状压(并没有).因为是照解题报告写的,代码 ...

  7. N - Binomial Showdown （组合数学）

    Description In how many ways can you choose k elements out of n elements, not taking order into acco ...

  8. 网站开发综合技术 HTML

    HTML            内容(Hyper Text Markup Language,超文本标记语言) CSS             网页美化 Javascript      脚本语言 第一部 ...

  9. [ USACO 2010 FEB ] Slowing Down

    \(\\\) \(Description\) 给出一棵 \(N\) 个点的树和 \(N\) 头牛,每头牛都要去往一个节点,且每头牛去往的点一定互不相同. 现在按顺序让每一头牛去往自己要去的节点,定义一 ...

  10. 树莓派GPIO点亮第一个led

    代码如下: 注意:::::此时的GPIO口为18编号口而非GPIO18 import RPi.GPIO as GPIO //引入函数库 import time RPi.GPIO.setmode(GPI ...