• react学习笔记4


            <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>
  • 相关阅读:
    Educational Codeforces Round 92
    练习
    03 并查集(带权,分类) 树状数组 线段树
    02 动态规划 LIS LCS
    05 矩阵优化 (斜率优化等待补)
    01 STL 打表 二分查找
    AtCoder Beginner Contest 174
    Codeforces Round #660 (Div. 2)
    PCHMI工控组态开发视频教程
    分享一款免费的工控组态软件(PCHMI)
  • 原文地址:https://www.cnblogs.com/DonaldTrump/p/6143054.html
Copyright © 2020-2023  润新知