React使用笔记(3)-React Event Listener
Date: 2015-11-28 12:18
Category: Web
Tags: JavaScript
Author: 刘理想
1. 构造基本结构
首先,我们先创建一个按钮,一个输入框。我们准备点击按钮时,后面有一个<span>
显示和隐藏。代码如下:
<div id="container"></div>
<script type="text/jsx">
var TestClickComponent = React.createClass({
render: function(){
return (
<div>
<button>显示|隐藏</button>
<span>测试点击</span>
</div>
);
}
});
var TestInputComponent = React.createClass({
getInitialState: function(){
return {
inputContent: ''
}
},
render: function(){
return (
<div>
<input type="text" /><span>{this.state.inputContent}</span>
</div>
);
}
});
React.render(
<div>
<TestClickComponent />
<TestInputComponent />
</div>,
document.getElementById('container'));
</script>
这里有几点需要注意,在render
里返回的时候,需要用个<div>
包裹起来,因为每个里面有好几html标签。
2. 给<button>
添加事件绑定
用驼峰式命名的方式来绑定事件,比如onClick
。注意这里的onClick
事件和原生HTML属性中的onclick
不是一回事儿。这里,它并不是一个真事的DOM节点,它只是一个React Element,而且写法也不一样,HTML标签的属性对于大小写是不敏感的,而React Element对于大小写是敏感的。
onClick
的处理函数一般通过对象属性封装在React组件的对象实例上。
var TestClickComponent = React.createClass({
handleClick: function(event){
},
render: function(){
return (
<div>
<button onClick={this.handleClick}>显示|隐藏</button>
<span>测试点击</span>
</div>
);
}
});
handleClick
函数的参数是React封装的event
对象。这个event
对象是在原生的js的event
对象的基础上封装的,因此,我们可以调用一些在原生js的event
对象上的方法:
handleClick: function(event){
event.stopPropagation();
event.preventDefault();
}
我们如何在event
事件处理函数内处理<span>
呢,我们通过给<span>
添加一个ref
属性,然后就能在this.refs
中获取这个对象了。
<span ref="tip">测试点击</span>
注意,我们使用this.refs.tip
引用的并不是真实的DOM节点,而是React组件。我们要操作DOM节点该怎么办呢?使用React给我们封装的方法React.findDOMNode
,参数就是我们的React组件。
handleClick: function(event){
var tipE = React.findDOMNode(this.refs.tip)
if (tipE.style.display === 'none'){
tipE.style.display = 'inline';
} else {
tipE.style.display = 'none';
}
event.stopPropagation();
event.preventDefault();
}
3. 给<input>
添加事件绑定
我们给<input>
添加onChange
事件,这里我们使用event.target.value
来获取<input>
的值,然后设置state
,对应的<span>
的内容就会跟着改变。
changeHandler: function(event){
this.setState({
inputContent: event.target.value
});
event.preventDefault();
event.stopPropagation();
},
render: function(){
return (
<div>
<input type="text" onChange={this.changeHandler}/><span>{this.state.inputContent}</span>
</div>
);
}
作者:liulixiang1988#gmail.com (#换成@)
参考链接:http://www.imooc.com/learn/504
React使用笔记(3)-React Event Listener的更多相关文章
- 【React学习笔记】React生命周期梳理(16.X前后两种)
React生命周期 「16版本以前的:」 生命周期流程图 组件从生成到被挂在到页面上的一系列过程 根据流程图打印的执行顺序图: 流程讲解: 初始化流程 start 开始创建组件 在这个周期中做的事情 ...
- react学习笔记1--基础知识
什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...
- React学习笔记。
有段时间没写博客了,最近这段时间有点说不出的苦,虽然说年轻的时候该多出去经历些事,但每次找工作东跑西跑,坐公交坐地铁浪费了我太多时间,我感觉到这是一种浪费,对生命的浪费.所以很想尽快找到一份工作,去努 ...
- React使用笔记2--创建登录组件
文章目录 最近在学习使用React作为前端的框架,<React使用笔记>系列用于记录过程中的一些使用和解决方法.本文记录搭建登录页面的过程. 根据产品规划划分模块 主要页面逻辑 在这里,本 ...
- React学习笔记-8-属性和状态详解
属性的含义和用法props=properties 英文中属性的意思.属性不可以修改,也就是属性不可以由组件进行修改,组件的属性是由父组件传递过来的,相当于组件在出生的时候带的.用法第一种:直接在调用组 ...
- React学习笔记-7-销毁阶段
销毁阶段可以使用的函数:componentWillUnmount:在删除组件之前进行清理操作,比如计时器和事件监听器.因为这些函数都是开发者手动加上去的,react不知道,必须进行手动清理. 实例第一 ...
- React学习笔记-6-运行中阶段介绍
运行中可以使用的函数componentWillReceiveProps:父组件修改属性触发,可以修改新属性,修改状态.字面意思,组件将要接收属性,这个函数触发的时机就是组件的属性将要发生改变的时候,但 ...
- Node.js建站笔记-使用react和react-router取代Backbone
斟酌之后,决定在<嗨猫>项目中引入react,整体项目偏重spa模式,舍弃部分server端的模板渲染,将一部分渲染工作交给前端react实现. react拥有丰富的组件,虽然不如Back ...
- React使用笔记1-React的JSX和Style
React使用笔记1-React的JSX和Style Date: 2015-11-27 20:56 Category: Web Tags: JavaScript Author: 刘理想 [toc] 1 ...
随机推荐
- 无废话ubuntu 13.4w文件共享配置
目标:实现windows和linux混合组成的操作 系统中可以共享文件,并可以通过机器名互相访问 安装文件共享服务 0.更改本机主机名,修改 /etc/hostname文件和/etc/hosts文件中 ...
- 你应该知道CSS选择器技巧
什么是:before和:after? 该如何使用他们? :before是css中的一种伪元素,可用于在某个元素之前插入某些内容. :after是css中的一种伪元素,可用于在某个元素之后插入某些内容. ...
- <转>ASP.NET学习笔记之MVC 3 数据验证 Model Validation 详解
MVC 3 数据验证 Model Validation 详解 再附加一些比较好的验证详解:(以下均为引用) 1.asp.net mvc3 的数据验证(一) - zhangkai2237 - 博客园 ...
- jQuery Mobile基础
1.安装 在<head></head>标签里边写入以下内容 jQuery Mobile CDN: <head> <meta charset="utf ...
- TOJ 1139.Compromise
2015-06-03 问题简述: 大概就是输入两段文本(用小写英文字母表示),分别用#表示一段话的结束输入,输出这两个文本的最长公共子序列. 简单的LCS问题,但是输入的是一段话了,而且公共部分比较是 ...
- 关于Python网络爬虫实战笔记③
Python网络爬虫实战笔记③如何下载韩寒博客文章 Python网络爬虫实战笔记③如何下载韩寒博客文章 target:下载全部的文章 1. 博客列表页面规则 也就是, http://blog.sina ...
- R与数据分析旧笔记(十一)数据挖掘初步
PART 1 PART 1 传统回归模型的困难 1.为什么一定是线性的?或某种非线性模型? 2.过分依赖于分析者的经验 3.对于非连续的离散数据难以处理 网格方法 <Science>上的文 ...
- unity3d 2d游戏制作的模式
经过了4个月不懈的努力,我和图灵教育合作的这本3D游戏开发书预计下个月就要出版了.这里MOMO先打一下广告,图灵的出版社编辑成员都非常给力,尤其是编辑小花为这本书付出了很大的努力,还有杨海玲老师, ...
- android-数据持久化
动态文件 String FILE_NAME = "tempfile.tmp"; try { //读 FileInputStream fis = openFileInput(FILE ...
- perspective结合transform的3D效果
http://css-tricks.com/almanac/properties/p/perspective/ 链接中讲了 perspective的两种用法及比较: 1.perspective:100 ...