<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>