<!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. 4.7.3 Canonical LR(1) Parsing Tables

    4.7.3 Canonical LR(1) Parsing Tables We now give the rules for constructing the LR(1) ACTION and GOT ...

  2. 洛谷 P2038 无线网络发射器选址 —— 二维树状数组

    题目:https://www.luogu.org/problemnew/show/P2038 大水题暴露出我的愚蠢. 用二维树状数组,然而居然忘了它应该那样写,调了一个小时: 正方形可以超出外面,只要 ...

  3. EasyUI之树形结构tree

    转自:https://blog.csdn.net/ya_1249463314/article/details/70305730 版权声明:本文为博主原创文章,未经博主允许不得转载. https://b ...

  4. 2-3 Vue实例中的数据，事件和方法

    上节课模板是写在Vue的实例里面的,现在我们可以把它恢复出来.写在挂载点的内部,看起来会舒服一点.Vue的数据项,可以配置任意的数据名字. <!DOCTYPE html> <html ...

  5. linux下jdk环境变量配置深度分析----解决环境变量不生效的问题

    1.linux下jdk环境变量配置 是否需要配置环境变量,主要看java -version 显示的版本是否为你期望的版本 1.1 不需要配置环境变量的情况 使用java -version查看,版本显示 ...

  6. 拦截机制中Aspect、ControllerAdvice、Interceptor、Fliter之间的区别详解

    Spring中的拦截机制,如果出现异常的话,异常的顺序是从里面到外面一步一步的进行处理,如果到了最外层都没有进行处理的话,就会由tomcat容器抛出异常. 1.过滤器:Filter :可以获得Http ...

  7. linux学习之路1 Linux系统安装

    VMware workstation虚拟器 网上下载VMware workstation,然后安装任一系统的linux系统,不过选的系统一定要跟你下载好的linux镜像保持一致,博主装的是Red Ha ...

  8. BFS Codeforces Beta Round #94 (Div. 2 Only) C. Statues

    题目传送门 /* BFS:三维BFS,坐标再加上步数,能走一个点当这个地方在步数内不能落到.因为雕像最多8步就会全部下落, 只要撑过这个时间就能win,否则lose */ #include <c ...

  9. magento Grid 显示下拉菜单属性

    在使用grid时自己新建了几个属性,然后其中有一个是下拉单,即deal_status protected function _prepareCollection() { $collection = M ...

  10. pyCharm最新激活码(2018)

    1.修改hosts文件: 添加下面一行到hosts文件,目的是屏蔽掉Pycharm对激活码的验证 0.0.0.0 account.jetbrains.com windwos系统hosts文件路径为:C ...