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

Posted 大智如蠢

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了学习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>
        <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-简单小案例--综合案例的主要内容，如果未能解决你的问题，请参考以下文章

学习react-简单小案例

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

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

react综合案例-todolistlocalstorage缓存数据

DNS解析综合学习案例实验详细代码

React学习案例九