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

本文转载自查看原文 2017-12-05 18:24 2840 react

<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>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 React-多页面应用 react-导航守卫 react-瀑布流一个简单的Maven小案例 react-绑定this并传参的三种方式 react-父子子孙组件嵌套-context React-日历组件（原生JS代码） React-报错Warning：setState(...)on anunmounted component React-非dom属性-dangerouslySetInnerHTML标签 react-router v6嵌套路由简单案例