夺命雷公狗-----React---13--事件监听

在react中事件监听直接作为组建的属性来添加即可，就像DOM中的html操作

 

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="./js/react.js"></script>
        <script src="./js/react-dom.js"></script>
        <script src="./js/browser.min.js"></script>
        <style>
            *{ margin:0px;  padding:0px;}
            .lists ul{ list-style:none; clear:both; }
            .lists ul li{ clear:; }
            .lists ul li img{ width:100px; }
            .lists ul li div:nth-child(1),.lists ul li div:nth-child(2),.lists ul li button{ float:left; }
            .lists ul li div:nth-child(2),.lists ul li button{ margin-left:30px; }
            .lists ul li button{ line-height:80px; height:80px; }
        </style>
    </head>
    <body>
        <div id="dome"></div>
        <script type="text/babel">
            var Fix = React.createClass({
                handleClick:function(){
                    alert('别老是点我');
                },
                render:function(){
                    return (
                        <div>
                            <h1>事件处理</h1>
                            <button onClick={this.handleClick}>GO</button>
                        </div>
                    );
                }
            });
            ReactDOM.render(
                <Fix />,
                document.getElementById('dome')
            );
        </script>
    </body>
</html>

 

posted @ 2016-11-17 17:08  夺命雷公狗  阅读(275)  评论(0)  编辑  收藏  举报