react 程序 显示隐藏 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://cdn.bootcss.com/react/0.14.1/react.js"></script>
    <script src="http://cdn.bootcss.com/react/0.14.1/react-dom.js"></script>
    <script src="http://cdn.bootcss.com/babel-core/5.8.32/browser.min.js"></script>
    <style>
        .box{
            background: #ccc;
            width:100px;
            height:100px
        }
    </style>
</head>
<body>
    <div id="app">
        
    </div>
</body>
<script type="text/babel">
    class ShowHide extends React.Component{
        constructor(...args){
            super(...args)
            this.state = {
                display:'block'
            }
        }
        
        fn(){
            this.setState({
            display:this.state.display == "block"?"none":"block" // 三木运算
        });
        }
        render(){
            return <div>
                <input type="button" value="显示隐藏" 
                onClick ={this.fn.bind(this)} />
                <div className = "box" style={{display:this.state.display}}></div>
                </div>
                
        }
    }

    window.onload = function(){
        var oDiv = document.getElementById("app");
        ReactDOM.render(
            <ShowHide/>,
            oDiv
            );
    }

</script>
</html>

 

陕西省最底层vfdv

posted on 2017-03-29 20:52  大娃二娃  阅读(343)  评论(0)  编辑  收藏  举报

导航