React使用笔记(3)-React Event Listener

目录

• 1. 构造基本结构
• 2. 给<button>添加事件绑定
• 3. 给<input>添加事件绑定

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