学习react-简单小案例(5)--checkbox事件 

<html>
    <head>
        <title></title>
        <meta charset="UTF-8"/>
        <script src="js/react.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/react-dom.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/browser.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="container"></div>
    </body>
    <script type="text/babel">
        var Demo = React.createClass({
            getInitialState:function(){
                return {
                    checked:false
                }
            },
            editChecked:function(){
                this.setState({
                    checked:!this.state.checked
                });
            },
            render:function(){
                var msg;
                if(this.state.checked){
                    msg = '勾选了';
                }else{
                    msg = '未勾选';
                }
                return(
                    <div>
                        <input type="checkbox" onChange={this.editChecked} defaultChecked={this.state.checked} />
                        <span>现在的状态是:{msg}</span>
                    </div>
                );
            }
        });
        ReactDOM.render(
            <Demo />,
            document.getElementById('container')
        );
    </script>
</html>

 

posted @ 2017-12-05 18:24  大智如蠢  阅读(4777)  评论(0)    收藏  举报