purpose

Front end to achieve paging, users click the paging button, data paging display

Train of thought

  • The introduction ofAntd DesignthePaginationThe paging component
  • Set the data in the constructorstate
  • Use the ones that come with itonChangeEvent function that automatically passes in the number of pages as an argument by default when a page is clicked
  • useonChangeFunction that manipulates data and intercepts an array of data fragments
  • Render function, listen to data changes, render different page data

steps

  1. The introduction ofAntd DesignthePaginationThe paging component, which sets data in the constructorstate.
import { Card, Pagination } from "antd";

exportclass App extends Component { constructor(props) { super(props); This. state = {minValue: 0, maxValue: 3}; } * * * * * * * * * *Copy the code
  1. Use the ones that come with itonChangeThe event
HandleChange = value => {handleChange = value => {if (value <= 1) {
      this.setState({
        minValue: 0,
        maxValue: 3
      });
    } else{ this.setState({ minValue: (value-1) * 3, maxValue: (value-1) * 3+ 3 }); }};render(){******** <Pagination defaultCurrent={1} // defaultPageSize={3} // defaultPageSize={3} // defaultPageSize={3} For example, onChange={this.handleChange} // Set the total number of data total={data.length} /> *******}Copy the code
  1. According to thestateRender data for the corresponding page, such as a page2, the location interval of its data is3-6.
render(){
         {data &&
              data.length > 0 &&
              data.slice(this.state.minValue, this.state.maxValue).map(val => (
                <Card
                  title={val.title}
                  style={{ width: 300 }}
                >
                  <p>{val.value}</p>
                </Card>
          ))}
        }
          
Copy the code

rendering

The complete code

import React, { Component } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Card, Pagination } from "antd";

export class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      minValue: 0,
      maxValue: 3
    };
  }
  handleChange = value => {
    if (value <= 1) {
      this.setState({
        minValue: 0,
        maxValue: 3
      });
    } else{ this.setState({ minValue: (value-1) * 3, maxValue: (value-1) * 3+ 3 }); }};render() {
    let data = [
      { title: "Card title1", value: "Card content1" },
      { title: "Card title2", value: "Card content2" },
      { title: "Card title3", value: "Card content3" },
      { title: "Card title4", value: "Card content4" },
      { title: "Card title5", value: "Card content5" },
      { title: "Card title6", value: "Card content6" },
      { title: "Card title7", value: "Card content7" },
      { title: "Card title8", value: "Card content8" },
      { title: "Card title9", value: "Card content9" },
      { title: "Card title10", value: "Card content10" },
      { title: "Card title11", value: "Card content11" },
      { title: "Card title12", value: "Card content12" },
      { title: "Card title13", value: "Card content13" },
      { title: "Card title14", value: "Card content14" },
      { title: "Card title15", value: "Card content15"}];return (
      <div>
        {data &&
          data.length > 0 &&
          data.slice(this.state.minValue, this.state.maxValue).map(val => (
            <Card
              title={val.title}
              style={{ width: 300 }}
            >
              <p>{val.value}</p>
            </Card>
          ))}
        <Pagination
          defaultCurrent={1}
          defaultPageSize={3}
          onChange={this.handleChange}
          total={data.length}
        />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("container"));
Copy the code

For more information

Stack Overflow looks like code

Antd Design Pagination