學習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嵌套路由簡單案例