正文

学习react-简单小案例--综合案例

大智如蠢  大智如蠢  2022-10-04  769

关键词：

<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>
        <style type="text/css">
            .bodystyle{
                width: 100%;
                height: 100%;
                background: brown;
            }
            .borderstyle{
                border: 1px solid #ccc;
                background: #ffffff;
                width: 200px;
                margin: 10px;
                float: left;
                height: 80px;
            }
            textarea{
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div id="container"></div>
    </body>
    <script type="text/babel">
        //父级DIV
        var Demo = React.createClass({
            //初始化
            getInitialState:function(){
                return ({
                    datas:[]
                });
            },
            updateComment:function(newText,i){
                var arr = this.state.datas;
                arr[i] = newText;
                this.setState({datas:arr});
            },
            delComment:function(i){
                var arr = this.state.datas;
                arr.splice(i,1);
                this.setState({datas:arr});
            },
            eachComment:function(text,i){
                return (
                    <Crud delCommentText={this.delComment} updateCommentText={this.updateComment} key={i} index={i}>
                        {text}
                    </Crud>
                    )
            },
            add:function(text){
                var arr = this.state.datas;
                arr.push(text);
                this.setState({datas:arr});
            },
            render:function(){
                return(
                    <div>
                        <div>
                            <button onClick={this.add.bind(null,"Hello world")}>添加</button>
                        </div>
                        <div className="bodystyle">
                            {this.state.datas.map(this.eachComment)}
                        </div>
                    </div>
                );
            }
        });
        //子级DIV
        var Crud = React.createClass({
            getInitialState:function(){
                return ({
                    edit:false
                });
            },
            edit:function(){
                this.setState({edit:true})
            },
            del:function(){
                this.props.delCommentText(this.props.index)
            },
            save:function(){
                var val = this.refs.newText.value;
                this.props.updateCommentText(val,this.props.index)
                this.setState({edit:false})
            },
            rederNormal:function(){
                return (
                    <div className="borderstyle">
                        <div>{this.props.children}</div>
                        <button onClick={this.edit}>编辑</button>
                        <button onClick={this.del}>删除</button>
                    </div>
                );
            },
            rederForm:function(){
                return (
                    <div className="borderstyle">
                        <textarea ref="newText" defaultValue={this.props.children}></textarea>
                        <button onClick={this.save}>更新</button>
                    </div>
                );
            },
            render:function(){
                if(this.state.edit){
                    return this.rederForm()
                }else{
                    return this.rederNormal()
                }
                
            }
        });
        ReactDOM.render(
            <Demo />,
            document.getElementById(‘container‘)
        );
    </script>
</html>

学习react-简单小案例

<html><head><title></title><metacharset="UTF-8"/><scriptsrc="js/react.min.js"type="text/javascript"charset="utf-8"></script><scriptsrc="js/react-dom.min.js 查看详情

学习react-简单小案例--点击事件

<html><head><title></title><metacharset="UTF-8"/><scriptsrc="js/react.min.js"type="text/javascript"charset="utf-8"></script><scriptsrc="js/react-dom.min.js 查看详情

javaee框架技术之14ssm综合案例(代码片段)

SSM综合案例一、课程目标1.【掌握】SSM整合2.【√】学习Lombok使用3.【理解】Layui页面书写（备注：其他前端技术也可以）4.【理解】理解SSM综合案例表的结构5.【掌握】产品管理二、SSM整合Spring+SpringMVC+Mybatis–>SSMSpring+Struts2+Hiber... 查看详情

react学习案例九

React学习案例九文章目录React学习案例九一、简介二、具体的代码三、总结一、简介这是react的学习案例九，希望对大家有一些帮助了啦。二、具体的代码下面就是这个案例实现的具体的代码。<!DOCTYPEhtml><html><head>... 查看详情

h5学习-简单的h5小案例

下面粘贴代码：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>集团首页</title><linkhref="css/style.css"rel="stylesheet"type="text/css 查看详情

夺命雷公狗-----react---27--小案例之react经典案例todos（清除已完成）

这个功能其实也是很简单的，就只是让todos里面的内isDown进行取反即可然后在Zong里面进行下修改即可效果如下所示：代码如下所示：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><... 查看详情

react学习案例六

React学习案例六简介这是第六篇React框架的学习的案例，也就是React学习案例六，主要是使用ReactDOM中的render函数来实现元素的嵌入的操作，这里是嵌入了一个组合的标签（html），但是需要注意的是多个html... 查看详情

javaee框架技术之14ssm综合案例产品管理crud(代码片段)

react学习案例二十三

React学习案例二十三<!--funct 查看详情

react学习案例十四

React学习案例十四<!DOCTYPEhtml><html><head><metacharset="UTF-8"/><title>HelloReact!</title></head><body><divid="example"></di 查看详情

react综合案例-todolistlocalstorage缓存数据(代码片段)

...lue.checked==false)count=count+1;)returncount;exportdefaultapp;2、todolist案例实现importReactfrom‘react‘;importstoragefrom‘../modules/storage‘ 查看详情

小程序从0到1首页布局案例的实现(代码片段)

...到我的博客📔博主是一名大学在读本科生，主要学习方向是前端。🍭目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏🛠目前正在学习的是🔥React/小程序React/小程序React/小程序... 查看详情

react学习案例二十二(代码片段)

React学习案例二十二MyComponent.propTypes=//可以声明prop为指定的JS基本数据类型，默认情况，这些数据是可选的optionalArray:React.PropTypes.array,optionalBool:React.PropTypes.bool,optionalFunc:React.PropTypes.func,optional 查看详情

react深入学习（资料，案例）

...工具下载具体的基于react+redux是基于es6进行开发的所以：学习es6 查看详情

react学习案例十二(代码片段)

React学习案例十二<!DOCTYPEhtml><html><head><metacharset="UTF-8"/><title>HelloReact!</title><scriptsrc="https://cdn.staticfile.org/react/16.4.0/umd/ 查看详情

webapisbom-操作浏览器之综合案例

案例:本地存储学习信息案例需求：改为本次存储版本的学习信息表需求：改为本次存储版本的学习信息表分析：需求①：读取本地存储数据（封装函数）如果本地存储有数据，则返回JSON.parse()之后的对象如果本地存储没有数据... 查看详情

react入门学习--github搜索案例(代码片段)

...小丞同学，一名大二的前端爱好者📢这篇文章是学习React中GitHub搜索案例的学习笔记📢非常感谢你的阅读，不对的地方欢迎指正🙏📢愿你忠于自己，热爱生活引言本文主要介绍React学习中Github搜索案... 查看详情