zent
Version:
一套前端设计语言和基于React的实现
115 lines (98 loc) • 2.47 kB
JavaScript
import React from 'react';
import Pagination from '../src/index.js';
import '../assets/index.scss';
const Custom = React.createClass({
getInitialState() {
return {
current: 1,
pageSize: 10,
totalItem: 1000,
max: 100
};
},
onChange(page) {
this.setState({
current: page
});
},
onTotalChange(e) {
let str = e.target.value.trim();
let value;
if (/^\d+$/.test(str)) {
value = +str;
} else {
value = 0;
}
this.setState({
totalItem: value
});
},
onPageSizeChange(e) {
let str = e.target.value.trim();
let value;
if (/^\d+$/.test(str)) {
value = +str;
} else {
value = 0;
}
this.setState({
pageSize: value
});
},
onCurrentChange(e) {
let str = e.target.value.trim();
let value;
if (/^\d+$/.test(str)) {
value = +str;
} else {
value = 0;
}
this.setState({
current: value
});
},
onMaxChange(e) {
let str = e.target.value.trim();
let value;
if (/^\d+$/.test(str)) {
value = +str;
} else {
value = 0;
}
this.setState({
max: value
});
},
render() {
return (
<div>
<form>
<div className="form-group">
<label>totalItem:</label>
<input type="text" className="form-control" placeholder="数字" value={this.state.totalItem} onChange={this.onTotalChange} />
</div>
<div className="form-group">
<label>pageSize:</label>
<input type="text" className="form-control" placeholder="数字" value={this.state.pageSize} onChange={this.onPageSizeChange} />
</div>
<div className="form-group">
<label>current:</label>
<input type="text" className="form-control" placeholder="数字" value={this.state.current} onChange={this.onCurrentChange} />
</div>
<div className="form-group">
<label>maxPageToShow:</label>
<input type="text" className="form-control" placeholder="数字" value={this.state.max} onChange={this.onMaxChange} />
</div>
</form>
<Pagination
current={this.state.current}
totalItem={this.state.totalItem}
pageSize={this.state.pageSize}
maxPageToShow={this.state.max}
onChange={this.onChange}
/>
</div>
);
}
});
export default Custom;