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 ...
随机推荐
- 22 WPF列表，树，网格
ListView ListView从ListBox派生,只增加了View属性.如果你没有设置View属性,ListView行为正如ListBox. 从技术上,View属性指向任何ViewBase派生类 ...
- 洛谷 P1084 疫情控制 —— 二分+码力
题目:https://www.luogu.org/problemnew/show/P1084 5个月前曾经写过一次,某个上学日的深夜,精疲力竭后只有区区10分,从此没管... #include< ...
- KeepAlived的介绍
KeepAlived介绍 keepalived keepalived是一个类似于layer3, 4 & 7交换机制的软件,也就是我们平时说的第3层.第4层和第7层交换. Keepalived的 ...
- PCB Genesis拼SET画工艺边 实现方法（一）
在PCB行业中,客户提供的PCB尺寸较小,为方便PCB加工,并生产提高生产效率,通常小于80X80mm需拼板处理的, 拼板要求可能来自按户指定拼板,也有可能是由工厂自行拼板,但对于CAM来说就需将PC ...
- 【JS】温故知新: 从parseInt开始
工作中,几乎习惯了大量使用方便的工具库(如underscore.lodash),但是长期的依赖,却有可能在我们注意不到的地方出现黑天鹅,笔者最近就碰到了这样一件例子: parseInt(9e-10); ...
- hdu6195 cable cable cable
cable cable cable Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others ...
- 21 调试我们的C#程序
我们写的C#程序,很多的时候不是能一次就写对的.尤其是在实际的项目中,你经常要做的工作就是不断修改你写的程序,让它正常运行.程序有错误,主要是两种情况.一种是程序报错了,不能正常运行下去.另一种是程序 ...
- 《从Paxos到ZooKeeper 分布式一致性原理与实践》阅读【Watcher】
ZooKeeper 允许客户端向服务端注册一个 Watcher 监听,当服务端的一些指定事件触发了这个 Watcher,那么就会向指定客户端发送一个事件通知来实现分布式的通知功能. ZooKeeper ...
- can't set blob value on that column
MySQL_Prepared_Statement::setBlob: can't set blob value on that column, MySQL error code:0, SQLState ...
- rem自适应布局小结001
在最近的移动端布局当中,最炙手可热的方式便是使用rem进行元素的布局.以下便是从最近的文章中所总结出来的一点东西. 首先,我们必须有以下的疑问: rem的本质是什么? rem如何实现自适应布局? 如何 ...