Реагировать на выборку и нумерацию страниц - PullRequest
Новая
       12

Реагировать на выборку и нумерацию страниц

0 голосов
/ 08 декабря 2018

Я пытаюсь сделать приложение с извлечением и разбивкой на страницы, на одной странице должно быть 12 элементов, Пока я чего-то достиг, есть 12 элементов, и я могу видеть следующую и предыдущую страницы, но я хочудостичь того, чтобы увидеть количество страниц, а затем, например, перейти с 1-й страницы на 3-ю и т. д. Кто-нибудь знает, как это сделать?Мой код: 

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      photos: [],
      thumbnailUrl: '',
      visible: 0,
      nextVisible: 12,
      error: ''
    }
  }

  componentDidMount() {
    fetch('https://jsonplaceholder.typicode.com/photos')
      .then(response => response.json())
      // .then(json => console.log(json))
      .then(resp => {
        this.setState({
          photos: resp,
        })
      })

  }

  loadMore() {
    this.setState((prev) => {
      return {
        visible: prev.visible + 12,
        nextVisible: prev.nextVisible + 12,
        error: ''
      }
    })
  }
  loadLess() {
    if (this.state.nextVisible > 12) {
      this.setState((prev) => {
        return {
          visible: prev.visible - 12,
          nextVisible: prev.nextVisible - 12,
        }
      })
    } else {
      this.setState({
        error: 'you are on first page'
      })
    }
  }

  render() {

    return (
      <div>
        <Grid>
          <Row>
            <Col md={6}>
          {this.state.photos.slice(this.state.visible, this.state.nextVisible).map((e, i) =>
                <ColumnFirst
                  title={e.title}
                  thumbnailUrl={e.thumbnailUrl}
                  key={i}
                />
              )}

              <button onClick={e => this.loadLess(e)}>Previous Page</button>
              <button onClick={e => this.loadMore(e)}>Next Page</button>
              <p>{this.state.error}</p>

            </Col>
          </Row>
        </Grid>
      </div>
    );
  }
}

export default App;

РЕДАКТИРОВАТЬ: я пытался использовать response-js-pagination, но кроме этого я могу видеть количество страниц ниже, ничего не происходит, когда я меняю страницу, я имею в виду, я знаю, как написатьфункция, чтобы увидеть следующие 12 страниц или предыдущие.Но почему-то я понятия не имею, как позволить приложению вычислять и показывать элементы на определенной странице 

handlePageChange(pageNumber) {
    console.log(`active page is ${pageNumber}`);
    this.setState({ activePage: pageNumber });
  }

<Col md={6}>

              {this.state.photos.slice(this.state.visible, this.state.nextVisible).map((e, i) =>
                <ColumnFirst
                  title={e.title}
                  thumbnailUrl={e.thumbnailUrl}
                  key={i}
                />
              )}
              <Pagination
                activePage={this.state.activePage}
                itemsCountPerPage={this.state.nextVisible}
                totalItemsCount={this.state.photos.length}
                pageRangeDisplayed={5}
                onChange={e => this.handlePageChange(e)}

              />
              <button onClick={e => this.loadLess(e)}>Previous Page</button>
              <button onClick={e => this.loadMore(e)}>Next Page</button>
              <p>{this.state.error}</p>

            </Col>

Ответы [ 2 ]

0 голосов
/ 08 декабря 2018

Вы можете использовать Ant Design Table для решения проблемы, я создал песочницу здесь https://codesandbox.io/s/6yz87n6wn пожалуйста, обратитесь к фрагменту кода ниже 

import React, { Component } from "react";
import axios from "axios";
import { Table } from "antd";

const columns = [
  {
    title: "ID",
    dataIndex: "id",
    key: "id"
  },
  {
    title: "Album Id",
    dataIndex: "albumId",
    key: "albumId"
  },
  {
    title: "Title",
    dataIndex: "title",
    key: "title"
  }
];
class AntTable extends Component {
  state = {};
  componentDidMount() {
    axios("https://jsonplaceholder.typicode.com/photos").then(resp => {
      this.setState({
        data: resp.data
      });
    });
  }
  render() {
    return (
      <div>
        Hello
        <Table columns={columns} dataSource={this.state.data} />
      </div>
    );
  }
}

export default AntTable;

Cheers!

0 голосов
/ 08 декабря 2018

У меня только что была проблема с этим самостоятельно.Я выбрал путь трусов и просто использовал React-Paginate:).

Страница npm для этого здесь .Если в будущем связь по какой-либо причине прервется, просто выполните поиск по запросу «реагировать на страницы».

Страница github для этого здесь .Если в будущем связь разорвется, просто найдите «AdeleD» на github и найдите репо «Resagate-Paginate».Документация в порядке.Вам действительно нужно просто пройтись по файлу demo / js / demo.js, как указано в разделе «прочитай меня», и вы должны быть в порядке.

Это не отвечает на ваш вопрос.Но, надеюсь, он предоставит вам альтернативный маршрут, если вы не можете найти решение вовремя.Удачи!

...