react 程序显示隐藏

最新推荐文章于 2025-08-22 19:09:26 发布

转载最新推荐文章于 2025-08-22 19:09:26 发布 · 62 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Jerry-spo/p/6641701.html

文章标签：

#javascript #ViewUI

本文介绍了一个使用React实现的简单显示隐藏功能的示例。通过按钮点击切换div的显示状态，展示了React组件的状态管理和事件处理。代码中包含了HTML结构、内联样式以及JavaScript逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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