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 ...
随机推荐
- POJ2503 Babelfish map或者hash_map
POJ2503 这是一道水题,用Map轻松AC. 不过,可以拿来测一下字符串散列, 毕竟,很多情况下map无法解决的映射问题需要用到字符串散列. 自己生成一个质数, 随便搞一下. #include&l ...
- SVN工具使用技巧
SVN打tag SVN打tag是一个很常用的功能,要谈打tag,还得从SVN官方推荐的目录结构说起.SVN官方推荐在一个版本库的根目录下先建立trunk.branches.tags这三个文件夹,其中t ...
- HTML <input>标签属性
- $CF1153A\ Serval\ and\ Bus$
看大佬的代码都好复杂(不愧是大佬\(orz\) 蒟蒻提供一种思路 因为求的是最近的车对吧\(qwq\) 所以我们可以用一个\(while\)循环所以没必要去用什么 \(for...\) 至于这是\(d ...
- 最大流增广路(KM算法) HDOJ 2255 奔小康赚大钱
题目传送门 /* KM:裸题第一道,好像就是hungary的升级版,不好理解,写点注释 KM算法用来解决最大权匹配问题: 在一个二分图内,左顶点为X,右顶点为Y,现对于每组左右连接Xi,Yj有权w(i ...
- 因Window服务器自动更新并重启导致WebSphere服务停止服务故障一例
最近公司购买了两台Windows Server 2008 R2服务器用于提供提供Web服务,A机器安装了IHS+DM+WAS8.5集群,B机器安装了Oracle11gR2用于数据存储,两台机器均可连接 ...
- Android 性能优化（21）＊性能工具之「GPU呈现模式分析」Profiling GPU Rendering Walkthrough：分析View显示是否超标
Profiling GPU Rendering Walkthrough 1.In this document Prerequisites Profile GPU Rendering $adb shel ...
- unix_12c_db_init
sample 1: add a new cdb 1.for the new db Aprod please apply two new direcotry in Cdb3/Cdb4/Aprod 5 ...
- struct结构的一些内容
srtuct结构的定义: 访问修饰符 struct 结构名{ //方法体 } 结构定义的特点: 1.结构中可以有字段(属性),也可以有方法 2.定义时,结构的字段不能被赋初值 3.结构和类一样都有默 ...
- jQuery学习笔记(1)-初探
一.jQuery是什么 1.jQuery是一套JavaScript脚本库,而不是框架:就好比"System是程序集"是类库,而"ASP.NET MVC"是框架: ...