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
最新文章
- ym—— Android网络框架Volley(体验篇)
- JDBC连接各种数据库的地址名称
- TOJ 2776 CD Making
- c语言模拟实现oc引用计数
- exists的用法
- hdu1535 SPFA
- sql插入多条数据的sql语句
- 什么是IntelAMT
- Maven搭建webService (二) 创建服务端－－－使用web方式发布服务
- 爬取知乎百万信息之UrlTask
- 【大坑】DataGridView多线程更新修改Cell单元格卡死
- OpenCV——无法启动此程序，丢失**解决办法
- session之退出登陆
- netty 3.9.2 UDP协议服务器和客户端DEMO
- 办理西蒙菲莎大学(本科)学历认证『微信171922772』SFU学位证成绩单使馆认证Simon Fraser University
- 微信小程序实现简易留言板
- C#学习-接口与抽象类
- 100-days: twenty-six
- SVN服务端和客户端的安装与搭建
- eMMC基础技术4：eMMC command