用ReactJS写的简单组件Pagebar（待完善。。。）

最新推荐文章于 2024-06-19 14:45:15 发布

weixin_34358365

最新推荐文章于 2024-06-19 14:45:15 发布

阅读量73

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/jackzlz/blog/510349

版权

2019独角兽企业重金招聘Python工程师标准>>>

代码结构

输入图片说明

代码如下

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>react pagebar</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
	<script type="text/javascript" src="js/react.js"></script>
	<script type="text/javascript" src="js/JSXTransformer.js"></script>
</head>
<body>
	<div id="pagebar"></div>
	<script type="text/jsx">
	var PageBar = React.createClass({
		handleClick:function(index) {
			this.setState({currPage: index});
		},
		handlePrev:function() {
			var currPage = this.state.currPage-1;
			if (currPage < 1) {
				return;
			}
			this.setState({currPage:currPage});
		},
		handleNext:function(){
			var currPage = this.state.currPage+1;
			if (currPage > this.props.totalCount) {
				return;
			}
			this.setState({currPage:currPage});
		},

		getInitialState: function(){
			return {currPage:1};
		},

		render : function() {
			var lis = [];
			var liClassName;
			for (var i = 0; i < this.props.totalCount; i++) {
				liClassName = "page-nav";
				if ((i+1) === this.state.currPage) {
					liClassName = "page-nav active"
				}
				lis.push(<li className={liClassName}><a href="javascript:void(0);" onClick={this.handleClick.bind(this, i+1)}>{i+1}</a></li>);
			}
			return (
				<nav>
					<ul className="pagination" style={{margin:0}}>
						<li className="page-prev">
							<a href="javascript:void(0);" aria-label="Previous" onClick={this.handlePrev}>
								<span aria-hidden="true">&laquo;</span>
							</a>
						</li>
						{lis}
						<li className="page-next">
							<a href="javascript:void(0);" aria-label="Next" onClick={this.handleNext}>
								<span aria-hidden="true">&raquo;</span>
							</a>
						</li>
					</ul>
				</nav>
			);
		}
	});

	React.render(<PageBar totalCount="10" />, document.getElementById("pagebar"));
	</script>
</body>
</html>