React事件处理

事件处理直接参考了慕课网上的教程，然后自己根据教程来编写实例，通过下面的实例可以很清晰地理解React的事件处理，其中需要注意的是索引refs！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
</head>
<body>
    <div id="container"></div>
    <script type="text/jsx">
        var TestClickComponent = React.createClass({
            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.preventDefault();
                event.stopPropagation();
            },
            render:function(){
                return(
                    <div>
                        <button onClick={this.handleClick}>显示|隐藏</button><span ref="tip">测试点击</span>
                    </div>
                )
            }
        });
        var TestInputComponent = React.createClass({
            getInitialState:function(){
                return {
                    inputContent:''
                }
            },
            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>
                )
            }
        });
        React.render(
        <div>
              <TestClickComponent></TestClickComponent>
              <TestInputComponent></TestInputComponent>
          </div>,document.getElementById("container")


        )
    </script>
</body>
</html>

 

posted @ 2017-02-28 16:48  Naomi❤  阅读(1041)  评论(0)  编辑  收藏  举报