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