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