react入门----事件监听
<!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入门----事件监听的更多相关文章
- [技术博客]react native事件监听、与原生通信——实现对通知消息的响应
在react native中会涉及到很多页面之间的参数传递问题.静态的参数传递通常利用组件的Props属性,在初始化组件时即可从父组件中将参数传递到子组件中.对于非父子关系的组件来说,无法直接传递参数 ...
- 4.pygame快速入门-事件监听
事件event:游戏启动后,用户针对游戏的所有操作 监听:在游戏循环中,判断用户的具体操作 pygame中通过pygame.event.get()可以获得当前用户所做动作的事件列表 事件监听 wh ...
- SpringBoot事件监听机制及观察者模式/发布订阅模式
目录 本篇要点 什么是观察者模式? 发布订阅模式是什么? Spring事件监听机制概述 SpringBoot事件监听 定义注册事件 注解方式 @EventListener定义监听器 实现Applica ...
- react native 之 事件监听 和 回调函数
同原生一样,react native 同样也有事件监听和回调函数这玩意. 场景很多,比如:A界面push到B界面,B界面再pop回A界面,可以给A界面传值或者告诉A刷新界面. 事件监听 事件监听类似于 ...
- React.js 小书 Lesson9 - 事件监听
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson9 转载请注明出处,保留原文链接和作者信息. 在 React.js 里面监听事件是很容易的事情 ...
- React 函数组件中对window添加事件监听resize导致回调不能获得Hooks最新状态的问题解决思路
React 函数组件中对window添加事件监听resize导致回调不能获得Hooks最新状态的问题解决思路 这几天在忙着把自己做的项目中的类组件转化为功能相同的函数组件,首先先贴一份该组件类组件的关 ...
- SpringBoot入门之事件监听
spring boot在启动过程中增加事件监听机制,为用户功能拓展提供极大的便利,sptingboot支持的事件类型有以下五种: ApplicationStartingEvent Applicatio ...
- Java中用得比较顺手的事件监听
第一次听说监听是三年前,做一个webGIS的项目,当时对Listener的印象就是个"监视器",监视着界面的一举一动,一有动静就触发对应的响应. 一.概述 通过对界面的某一或某些操 ...
- Node.js 教程 05 - EventEmitter(事件监听/发射器 )
目录: 前言 Node.js事件驱动介绍 Node.js事件 注册并发射自定义Node.js事件 EventEmitter介绍 EventEmitter常用的API error事件 继承EventEm ...
随机推荐
- SVN导出指定版本差异文件 ***
当一个项目进入运营维护阶段以后,不会再频繁地更新全部源文件到服务器,这个时间的修改大多是局部的,因此更新文件只需更新修改过的文件,其他 没有修改过的文件就没有必要上载到服务器.但一个稍微上规模的项目文 ...
- 【174】C#添加非默认字体
参考:C# WinForm程序安装字体或直接调用非注册字体 参考:百度知道 在Debug文件夹下面新建一个font的文件夹,然后将字体的文件复制到里面,使用的时候,直接调用字体文件! private ...
- IE6的3像素BUG产生条件及解决方法
1.IE6中第一个元素浮动第二个元素不浮动,这两个元素之间就会产生3像素BUG 2.解决方案: 2.1若若宽度一定则给第二个元素添加 float 样式即可: 2.2若宽度自适应: 2.2.1 _ma ...
- Net 发布网站中遇到的几点问题
1.windows 身份验证设置 打开IIS==>=>找到网站==> 身份验证==>打开功能==>启用windows身份验证 网站设置: 博客参考: http://blo ...
- BFS POJ 3126 Prime Path
题目传送门 /* 题意:从一个数到另外一个数,每次改变一个数字,且每次是素数 BFS:先预处理1000到9999的素数,简单BFS一下.我没输出Impossible都AC,数据有点弱 */ /**** ...
- 用Movie显示gif(2)GifView
1,类 import android.annotation.SuppressLint; import android.content.Context; import android.content.r ...
- 全面学习ORACLE Scheduler特性(7)Scheduler抛出的Events
四.使用Events Event直译对应的中文解释是指事件,不过单纯讲事件毕竟太抽象了,举个示例来形容吧.A(对应某个应用程序,或者是ORACLE中的进程)在干活时突然眉头一皱说道,不好,前方有情况, ...
- Spring.Net学习笔记(八)-设置配置文件参数
一.开发环境 VS2013 .netframework4.5 spring.net1.3.1 二.项目结构 三.开发过程 1.编写Person类 namespace SpringNetConfigAr ...
- Http请求1
package Test; import java.io.IOException; import java.io.InputStreamReader; import java.net.URISynta ...
- MVC之参数验证(三)
在实际开发中,项目经理会一直强调一句话,永远不要相信客户端的数据(前端可以不用验证,但是后端必须验证).大家同意这样的说法吧..新端验证毋庸质疑JS验证,提高用户体验我们不得不添加一些与后端一致的验证 ...