@beisen/paging/story/index.js

configurable page component

import React, {
  Component,
  PropTypes
} from 'react'
import {
  render
} from 'react-dom'

import Paging from '../lib/index.js';

class Demo extends Component {

  constructor(props) {
    super(props);
    this.state = {
      page: 1
    }
    this.setPage = this.setPage.bind(this);
  }

  setPage() {
    this.setState({
      page: 10
    })
  }

  render() {
    const options = {
      hidden: false, // 是否渲染 默认false
      total: 1009, //总页数
      currentPage: this.state.page, // 当前页数
      visiblePages: 7, // 显示的页数，奇数，min = 5
      capacity: 15, // 每页条数，页面容量
      capacityList: [15, 30, 60, 100], //可选的页面容量
      onIndexChange: index => console.log(index), // 页数变化
      onCapacityChange: index => console.log(index) //页面容量变化
    };

    return (
      <div>
        <button onClick={this.setPage}>11111111</button>
          <Paging {...options} />
      </div>
    )
  }
}
module.exports = Demo;