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 ...
随机推荐
- js获取下拉框当前选中的值并弹出
this.options[this.selectedIndex].value --- 显示文本 this.value --- 实际存储值 调用实例: <script language=" ...
- 测试-Swagger：Swagger
ylbtech-测试-Swagger:Swagger The Best APIs are Built with Swagger Tools. Swagger 是一款RESTFUL接口的文档在线自动生成 ...
- IDEA中Spark读Hbase中的数据
import org.apache.hadoop.hbase.HBaseConfiguration import org.apache.hadoop.hbase.io.ImmutableBytesWr ...
- 函数bsxfun，两个数组间元素逐个计算的二值操作
转自http://www.cnblogs.com/rong86/p/3559616.html 函数功能:两个数组间元素逐个计算的二值操作 使用方法:C=bsxfun(fun,A,B) 两个数组A合B间 ...
- mybatis中各种数据的映射类型
Mybatis对应的java和数据库的数据类型,最后有图片 Mybatis java ...
- echart 参数 vue配置 图文展示
https://blog.csdn.net/she_lover/article/details/51448967 https://blog.csdn.net/n_meng/article/detail ...
- Java 添加、回复、修改（替换）、删除Word批注
批注是一种常用于对特定文档内容进行注解的工具或方法,起到解释说明.标记指正的作用.在本篇文章中,将介绍如何操作Word批注的方法,包括: 1. 添加批注:添加文本到批注.插入图片到批注: 2. 回复批 ...
- Kafka详解与总结(六)
索引 稀疏存储,每隔一定字节的数据建立一条索引(这样的目的是为了减少索引文件的大小). 下图为一个partition的索引示意图: 注: 现在对6.和8建立了索引,如果要查找7,则会先查找到8然后,再 ...
- 微信小程序资源
1.http://blog.csdn.net/wyx100/article/details/52667518 2.http://mp.weixin.qq.com/s?__biz=MzIyMDM2Mjg ...
- IBatis.NET 的配置
http://www.cnblogs.com/xiaogangqq123/archive/2011/06/29/2093250.html http://www.cnblogs.com/hjf1223/ ...