js代码:
// 创建组件
var NavBar = React.createClass({
removeNode: function () {
ReactDOM.unmountComponentAtNode(document.getElementById("container"))
},
loadMovie: function () {
ReactDOM.render(
<MovieList src="http://localhost/myphp/movies.php" />,
document.getElementById("container")
)
},
loadReview: function () {
ReactDOM.render(
<div>
<ReviewList src="http://localhost/myphp/reviews.php" />
<ReviewBox />
</div>,
document.getElementById("container")
)
},
render: function(){
return <ul>
<li><a href="#" onClick={this.loadMovie}>最新电影</a></li>
<li><a href="#" onClick={this.loadReview}>最新评论</a></li>
<li><a href="#" onClick={this.removeNode}>移除组件</a></li>
<li><SearchText cssClass={this.props.searchTextCss} placeholder={this.props.searchTextPlaceHolder} /></li>
</ul>
}
});
// 搜索框组件
var SearchText = React.createClass({
render: function(){
return <input type="text" placeholder={this.props.placeholder} className={this.props.cssClass}/>
}
});
// 电影列表组件
var MovieList = React.createClass({
getInitialState: function () {
return {
movie:[] //保存电影json对象数组
};
},
componentDidMount: function () {
$.get(this.props.src,null,function (ret) {
this.setState({movie:ret});
}.bind(this))
},
render: function(){
if(this.state.movie.length == 0){
//代表还没有完成 数据交互,显示一个蒙版
return <PageMask />
}else{
var lis = this.state.movie.map(function (m) {
return <li><p className="title">{m.movieName}</p><p className="intro">{m.movieIntro}</p></li>
})
return <ul id="movielist">{lis}</ul>
}
}
});
// 电影评论组件
var ReviewList = React.createClass({
getInitialState: function () {
return {
review:[], //保存电影json对象数组
timer:null
};
},
componentDidMount: function () {
this.state.timer = setInterval(function () {
$.get(this.props.src,null,function (ret) {
this.setState({review:ret});
}.bind(this))
}.bind(this),3000);
},
componentWillUnmount: function () {
if(this.state.timer != null){
clearInterval(this.state.timer);
}
},
render: function(){
if(this.state.review.length == 0){
//代表还没有完成 数据交互,显示一个蒙版
return <PageMask />
}else{
var lis = this.state.review.map(function (r) {
return <li><span className="author">{r.user}</span><span>{r.content}</span></li>
})
return <ul id="reviewList">{lis}</ul>
}
}
});
// 评论框组件
var ReviewBox = React.createClass({
getInitialState: function () {
return {
rtitle: "初始化标题", //评论标题
rcontent: "",
rcontentnum:0,
rselected:'b'
};
},
textChange:function (event) {
this.setState({rtitle: event.target.value});
},
textAreaChange:function (event) {
var getValue = event.target.value;
var len = getValue.length;
this.setState({rcontent:getValue, rcontentnum:len});
},
selectChange:function (event) {
this.setState({rselected:event.target.value, rcontent:event.target.selectedOptions[0].text});
},
submit: function () {
alert(this.state.rselected)
},
render: function () {
return <dl className="reviewbox">
<dt>发表评论</dt>
<dd><input type="text" value={this.state.rtitle} onChange={this.textChange} /></dd>
<dd><textarea value={this.state.rcontent} onChange={this.textAreaChange} ></textarea></dd>
<dd><span>已经输入长度为:{this.state.rcontentnum}</span></dd>
<dd>
<select value={this.state.rselected} onChange={this.selectChange}>
<option value="a">--请选择默认--</option>
<option value="b">发布到首页</option>
<option value="c">发布到精选区</option>
</select>
</dd>
<dd><input type="button" value="提交" onClick={this.submit} /></dd>
</dl>
}
});
// 遮罩组件
var PageMask = React.createClass({
render: function () {
return <div className="mask"><p>正在加载...</p></div>
}
});
ReactDOM.render(
// 使用组件
<NavBar searchTextCss="search_text2" searchTextPlaceHolder="请输入关键字" />,
document.getElementById("navbar")
);
html代码:
<!DOCTYPE html>
<html>
<head>
<title>初始</title>
<meta charset="utf-8">
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="node_modules/zepto/dist/zepto.min.js"></script>
<style type="text/css">
*{padding: 0;margin: 0}
#navbar{position: fixed;top: 0;left: 0;width: 100%;height: 60px;background-color: #222;}
#navbar li{float: left;line-height: 60px;margin-left: 10px;display: inline-block;}
#navbar li a{color: #fff;text-decoration: none;}
/*searchtext的样式*/
.search_text{height: 25px;border-radius: 5px;}
.search_text2{height: 25px;border-radius: 5px;background-color: beige}
#container{margin: 70px auto;}
#container p{text-align: center;}
#movielist .title{font-weight: bold;font-size: 18px;}
#movielist .intro{text-indent: 2em;color: gray;border-bottom: 1px dashed #dddddd;text-align: left;padding: 10px;}
.mask{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: gray;opacity: 0.5;z-index: 999;}
.mask p{width: 20%;height: 30px;line-height: 3px;margin: 0 auto;margin-top: 30%;opacity: 1.0;}
#reviewList{width: 80%;margin: 10px auto;}
#reviewList li{line-height: 24pt;float: left;width: 100%;display: block;border: 1px solid #dddddd;margin-top: 16px;text-indent: 2em;}
#reviewList li .author{color: gray;margin-left: 5px;}
.reviewbox{width: 80%;margin: 10px auto;}
.reviewbox dt{line-height: 21pt;font-weight: bold;}
.reviewbox dd{margin-top: 10px;}
</style>
</head>
<body>
<div id="navbar"></div>
<div id="container">
</div>
<div id="footer"></div>
<script type="text/babel" src="src/nav.js"></script>
</body>
</html>