React事件监听相关例子

最新推荐文章于 2024-07-27 08:58:09 发布

hannah1116

最新推荐文章于 2024-07-27 08:58:09 发布

阅读量2.3k

点赞数

分类专栏： React 文章标签： React事件监听例子

本文链接：https://blog.csdn.net/hannah1116/article/details/80951091

版权

React 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

 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>

        );

    }

});