reactjs_learning_demo
/
react组件-事件,方法,state.使用state改变--组件的切换....

<html>

<head>
    <meta charset="utf-8">
    <title>react组件的: 事件,方法,state</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background: gold;
        }
        .input{
            width: 200px;
            height: 150px;
            background:lightgreen;
        }

        textarea {
            width: 200px;
            height: 160px;
        }
    </style>
</head>

<body>
    <div id="container"></div>

    <script src="js/react.min.js"></script>
    <script src="js/react-dom.min.js"></script>
    <script src="js/babel.min.js"></script>
    <script type="text/babel">

            //创建组件==>套2个小组件
            var Box=React.createClass({
                //初始状态: true/false  切换不同的组件
                getInitialState:function(){
                    return {editing:true}
                },

                //事件-----方法
                edit:function(){
                     // alert("edit");
                     this.setState({
                         editing:!this.state.editing
                     })
                 },
                delete:function(){
                      //alert("delete");
                },
                save:function(){
                     //切换回  原页面
                     this.setState({
                         editing:!this.state.editing
                     })
                },

                //===========组件2
                renderBean1:function(){
                  return (  <div className="box">
                                 <textarea>评论内容展示.....</textarea>
                                 <button onClick={this.edit}>edit</button>
                                 <button onClick={this.delete}>delete</button>
                            </div>
                    );
                },
                //===========组件1
                renderBean2:function(){
                  return (  <div className="box">
                                <div>
                                   <textarea
                                        className="input"
                                        defaultValue={this.props.children}>想要说点神码...?</textarea>
                                   <button onClick={this.save}>save</button>
                                </div>
                            </div>
                    );
                },

                //内部调用组件: render组件
                render:function () {

                    if(this.state.editing){
                        return this.renderBean1();

                    }else{
                        return this.renderBean2();
                    }

                }
            })

            //***********外部调用组件: ********
            ReactDOM.render(
                <div>
                     <Box/>
                     <Box/>
                </div>
                ,
                document.getElementById("container")
            )
           //***********外部调用组件: ********
        </script>
</body>

</html>