用react实现的简单留言功能，提交留言和删除留言，
组件划分：
总组件：MainComponent
消息组件：MesComponent
列表展示组件：ListComponent
列表组件：ItemComponent
数据结构
{
userName:”zt”,
content:”欢迎来到秋秋蓝枫博客！”,
_id:Date.now()+1
},{
userName:”蓝枫”,
content:”欢迎来到秋秋蓝枫博客！”,
_id:Date.now()
}
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
<style type="text/css">
.down_select{
height: 20px;
background: #fff;
width: 60px;
color: #000;
}
.handle {
width: 40px;
border:1px solid #ccc;
background: #fff;
position: absolute;
right: 10px;
top:1px;
text-align: center;
}
.handle a{
display: block;
text-decoration: none;
}
.list-group-item .centence{
padding: 0px 50px;
}
.user{
font-size: 22px;
}
.reply {
margin-top: 0px;
}
.list-group li {
transition: .5s;
overflow: hidden;
}
</style>
<script src="./src/react-with-addons.js"></script>
<script src="./src/react-dom.js"></script>
<script src="./src/browser.min.js"></script>
<script src="./src/pubsub.js"></script>
</head>
<body>
<header class="site-header jumbotron">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>欢迎来到秋秋蓝枫博客</h1>
<p class="lead">秋秋蓝枫博客是一个技术分享....！</p>
</div>
</div>
</div>
</header>
<div class="container" id="demo">
</div>
<script type="text/babel">
var delectItem = 'delectItem';
var MesComponent = React.createClass({
render:function () {
return (
<div className="col-md-4">
<form className="form-horizontal">
<div className="form-group">
<label>用户名</label>
<input type="text" ref="userName" className="form-control" placeholder="用户名" />
</div>
<div className="form-group">
<label>留言内容</label>
<textarea ref="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 user = this.refs.userName.value,
contentt = this.refs.content.value;
if(user!="" && (contentt !="")){
this.props.addItem1({
userName:user,
content:contentt,
_id :Date.now()
})
}
this.refs.userName.value="";
this.refs.content.value="";
}
})
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 ListConmponent = 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 MainConmponent = 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))
},
addItem:function (data) {
this.state.listArr.push(data)
this.setState({listArr:this.state.listArr})
},
render:function () {
return (
<div className="container">
<MesComponent addItem1={this.addItem}/>
<ListConmponent listArr={this.state.listArr} />
</div>
)
}
})
var listArr = [
{
userName:"zt",
content:"欢迎来到秋秋蓝枫博客！",
_id:Date.now()+1
},{
userName:"蓝枫",
content:"欢迎来到秋秋蓝枫博客！",
_id:Date.now()
}
]
ReactDOM.render(<MainConmponent listArr={listArr} />,document.getElementById('demo'))
</script>
</body>
</html>
