var TestClickComponent = React.creatsClass({

    handleClick: function(event){

    //操作DOM节点

        var msg = React.findDOMNode(this.refs.tip);

         if(msg.style.display === 'none'){

            msg.style.display = 'inline';

        }else{

            msg.style.display = 'none';

        }

        //阻止事件的冒泡和默认行为

        event.stopPropagation();

        event.preventDefault();

    },

    render: function(){

        return(

            <div>

                <button onClick={this.handleClick}>显示/隐藏</button>

                <span ref="tip">message</span>

            </div>

        );

    }

});

var TestInputComponent = React.createClass({

    getInitialState: function(){

        return{

            inputContent: ' '
        }

    },

    changeHandler:function(event){

      //改变state的值

        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>

        );

    }

});