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的更多相关文章

  1. 【React学习笔记】React生命周期梳理(16.X前后两种)

    React生命周期 「16版本以前的:」 生命周期流程图 组件从生成到被挂在到页面上的一系列过程 根据流程图打印的执行顺序图: 流程讲解: 初始化流程 start 开始创建组件 在这个周期中做的事情 ...

  2. react学习笔记1--基础知识

    什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...

  3. React学习笔记。

    有段时间没写博客了,最近这段时间有点说不出的苦,虽然说年轻的时候该多出去经历些事,但每次找工作东跑西跑,坐公交坐地铁浪费了我太多时间,我感觉到这是一种浪费,对生命的浪费.所以很想尽快找到一份工作,去努 ...

  4. React使用笔记2--创建登录组件

    文章目录 最近在学习使用React作为前端的框架,<React使用笔记>系列用于记录过程中的一些使用和解决方法.本文记录搭建登录页面的过程. 根据产品规划划分模块 主要页面逻辑 在这里,本 ...

  5. React学习笔记-8-属性和状态详解

    属性的含义和用法props=properties 英文中属性的意思.属性不可以修改,也就是属性不可以由组件进行修改,组件的属性是由父组件传递过来的,相当于组件在出生的时候带的.用法第一种:直接在调用组 ...

  6. React学习笔记-7-销毁阶段

    销毁阶段可以使用的函数:componentWillUnmount:在删除组件之前进行清理操作,比如计时器和事件监听器.因为这些函数都是开发者手动加上去的,react不知道,必须进行手动清理. 实例第一 ...

  7. React学习笔记-6-运行中阶段介绍

    运行中可以使用的函数componentWillReceiveProps:父组件修改属性触发,可以修改新属性,修改状态.字面意思,组件将要接收属性,这个函数触发的时机就是组件的属性将要发生改变的时候,但 ...

  8. Node.js建站笔记-使用react和react-router取代Backbone

    斟酌之后,决定在<嗨猫>项目中引入react,整体项目偏重spa模式,舍弃部分server端的模板渲染,将一部分渲染工作交给前端react实现. react拥有丰富的组件,虽然不如Back ...

  9. React使用笔记1-React的JSX和Style

    React使用笔记1-React的JSX和Style Date: 2015-11-27 20:56 Category: Web Tags: JavaScript Author: 刘理想 [toc] 1 ...

随机推荐

  1. 算法导论——lec 10 图的基本算法及应用

    搜索一个图是有序地沿着图的边訪问全部定点, 图的搜索算法能够使我们发现非常多图的结构信息, 图的搜索技术是图算法邻域的核心. 一. 图的两种计算机表示 1. 邻接表: 这样的方法表示稀疏图比較简洁紧凑 ...

  2. 大型票务系统中username和password的安全性问题

    讨论请移步至:http://www.zhiliaotech.com/ideajam/idea/detail/307 相关文章: <今天你买到票了吗?--从铁道部12306.cn站点漫谈电子商务站 ...

  3. 前端新人学习笔记-------html/css/js基础知识点

    即将毕业的软件工程大学生一枚,秋季招聘应聘的是Android,今年来到公司实习,要求做前端开发,所以一切只有现学,现在根据视频来学习,然后开这个博客记录一下自己的学习过程,废话不多说,开写. 4月6日 ...

  4. Archlinux 安装配置指导 2015-05-24

    因为用的Linode VPS的系统是Archlinux的,想在本地弄个系统做测试用,这样比较方便.然后发现自己在6年前做的一个Archlinux 安装配置Flash,好怀念的赶脚. 时过进迁,没想到A ...

  5. Objective-C中的SEL (转载)

     SEL 在Objective-C中,SEL是选择器(selector)的一个类型.选择器就是指向方法的一个指针,读者可以简单理解为程序运行到这里就会执行指定的方法,可以这样定义一个选择器: SEL  ...

  6. 对于System.Net.Http的学习(一)——System.Net.Http 简介(转)

    最新在学习System.Net.Http的知识,看到有篇文章写的十分详细,就想转过来,自己记录下.原地址是http://www.cnblogs.com/chillsrc/p/3439215.html? ...

  7. vs2012C#编程环境设置智能提示

    vs2012 智能提示和  显示行号的问题 路径为    菜单里 工具-->选项-->文本编辑器-->C#  如图所示 自动列出成员就是 vs里面的智能提示 行号就会显示所写代码的行 ...

  8. 《Effective C++》Item2:尽量以const,enum,inline替换#define

    1. 宏定义 #define ASPECT_RATIO 1.653 该宏定义ASPECT_RATIO也许从来没有被编译器看到,也许在编译器开始处理源码之前就已经被预处理器替换了.所以记号名称ASPEC ...

  9. Linux学习之chage命令

    功能:修改帐号和密码的有效期限用法:chage[-l][-m mindays][-M maxdays][-I inactive][-E expiredate][-W warndays][-d last ...

  10. Linux学习之Makefile文件的编写

    转自:http://goodcandle.cnblogs.com/archive/2006/03/30/278702.html 目的:       基本掌握了 make 的用法,能在Linux系统上编 ...