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

相关阅读:
trie树
单调队列
网络流24题——试题库问题
费用流的简单应用
Manacher算法
KMP算法
网络流之最小费用最大流
网络流之二分图匹配【转】
网络流之最大流
矩阵快速幂优化菲波那切数列

原文地址：https://www.cnblogs.com/Jerry-spo/p/6641701.html

react 程序 显示隐藏

react 程序显示隐藏