react学习笔记4

Posted 2020-08-22 hahaha222

        <header class="site-header jumbotron">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12">
                        <h1>欢迎来到妙味课堂</h1>
                        <p class="lead">妙味课堂是一支独具特色的IT培训团队，妙味反对传统IT教育枯燥乏味的教学模式，妙味提供一种全新的快乐学习方法！</p>
                    </div>
                </div>
            </div>
        </header>
        <div class="container" id="demo">
            
        </div>
        <script type="text/babel">
            var delectItem = ‘delectItem‘;//①先在外层定义一个变量,订阅发布都通过它来走

            var ItemComponent = React.createClass({
                    render:function (){
                        return (
                             <li className="list-group-item">
                                 <div className="handle" >
                                    <a href="javascript:;" onClick={this.delectHandle}>删除</a>
                                 </div>
                                <p className="user" ><span >{this.props.userName}</span><span>说:</span></p>
                                   <p className="centence">{this.props.content}</p>
                            </li>
                        )        
                    },
                    delectHandle:function (){/*③发布事件*/
                        
                        PubSub.publish(delectItem,this.props._id);    
                    }
                })
            var ListComponent = React.createClass({
                    render:function (){
                        var isNone = !!this.props.listArr.length ? "none" : "block";

                        return (
                            <div className="col-md-8">
                                <h3 className="reply">留言回复：</h3>
                                <h2 style={{display:isNone}}>暂无留言，点击左侧添加留言！！！</h2>
                                <ul className="list-group">
                                   {
                                           this.props.listArr.map(function (item,index){
                                               return <ItemComponent key={index} {...item} />
                                           })
                                   }
                                </ul>
                            </div>
                        )        
                    }
                })
            var MesComponent = React.createClass({
                    render:function (){
                        return (
                            <div className="col-md-4">
                                <form className="form-horizontal">
                                    <div className="form-group">
                                        <label>用户名</label>
                                        <input ref="text_user" type="text" className="form-control" placeholder="用户名" />
                                    </div>
                                    <div className="form-group">
                                        <label>留言内容</label>
                                        <textarea ref="text_content" className="form-control" rows="6" placeholder="留言内容"></textarea>
                                    </div>
                                    <div className="form-group">
                                        <div className="col-sm-offset-2 col-sm-10">
                                            <button type="button" className="btn btn-default pull-right" onClick={this.addItemHandle}>提交</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        )        
                    },
                    addItemHandle:function (){
                        var userName = this.refs.text_user.value;    
                        var content = this.refs.text_content.value;

                        this.props.addItem({
                            userName:userName,
                            content:content,
                            _id:Date.now()
                        });
                /*addItem 要先在父组件中定义,然后传递给子组件,子组件通过this.props访问,不太明后的是
                这个方法传过去了,this的指向不会变吗,操作的还是父组件里的this.state.listArr吗*/        
                
                /*如果是超过2级以上的组件通信,可以使用订阅发布模式*/                

                        this.refs.text_user.value = ""
                        this.refs.text_content.value = ""
                    }
                })
            
            var MainComponent = React.createClass({
                getInitialState:function (){
                    return {
                        listArr:this.props.listArr
                    }    
                },
                componentDidMount:function (){/*②组件渲染完成触发事件,订阅事件*/
                    PubSub.subscribe(delectItem,function (evName,data){
                        var newArr = this.state.listArr.filter(function (item,index){
                            return item._id !== data
                        });
                        this.setState({listArr:newArr});
                    }.bind(this))
                    /*函数里的this指向的应该是pubsub,通过bind方法让他指向外层*/    
                },
                addItem:function (data){    
                    this.state.listArr.push(data);
                    this.setState({listArr:this.state.listArr})
                },

                render:function (){
                    return (
                        <div className="container">
                            <MesComponent addItem = {this.addItem} />
                            <ListComponent listArr={this.state.listArr}  />
                        </div>
                    )        
                }
            });

            var listArr = [
                        {
                            userName:"person1",
                            content:"hi",
                            _id:Date.now()+1
                        },{
                            userName:"person2",
                            content:"hello",
                            _id:Date.now()
                        }
                    ]

            ReactDOM.render(<MainComponent listArr={listArr} />,document.getElementById("demo"))


        </script>