Реагируйте: нумерация страниц не работает гладко - PullRequest
Новая
       42

Реагируйте: нумерация страниц не работает гладко

1 голос
/ 13 марта 2019

Я работаю над разбиением на страницы в React.Я получаю данные с онлайн-сервера через API.API был построен в Loopback.У меня есть проблемы с кнопками next и previous.Я делаю логику для разбивки на страницы, если пользователь хочет визуализировать данные следующей страницы, он нажимает на следующую, если пользователь хочет загрузить данные предыдущей страницы, он нажимает на предыдущую кнопку.С моей логикой кнопка Next работает нормально, она отображает данные следующей страницы, если пользователь нажимает кнопку Next, но проблема в том, что если пользователь хочет нажать кнопку previous, он загружает данные следующей страницы, не такие как данные предыдущей страницы.Кто-нибудь, пожалуйста, помогите мне, как я могу сделать этот тип нумерации страниц, если пользователь нажимает на следующую, он должен загрузить данные следующей страницы, или пользователь хочет загрузить данные предыдущей страницы, он должен загрузить предыдущую страницу кнопкой prev.

Код 

<code>        class Example extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      Item: 5,
      skip: 0
    }

    this.handleClick = this.handleClick.bind(this);
  }

  urlParams() {
    return `http://localhost:3001/meetups?filter[limit]=${(this.state.Item)}&&filter[skip]=${this.state.skip}`
  }

  handleClick() {
    this.setState({skip: this.state.skip + 1})
  }

  render() {
    return (
      <div>
        <a href={this.urlParams()}>Example link</a>
        <pre>{this.urlParams()}
Изменить ссылку )}} ReactDOM.render (, document.querySelector ('div # my-example'))

Ответы [ 2 ]

2 голосов
/ 13 марта 2019

Вы просто пишете btnClick (e) одним способом, добавляя skip: skip + 10, но если вам нужны предыдущие данные, вычтите skip: skip-10

Итак, решение 

btnClick(e,type){
const Item=this.state.Item;
const skip=this.state.skip;
If(type === “next”){
this.setState({
  Item,
  skip:skip-10
},()=> this.getData())
} else {
  this.setState({
  Item,
  skip:skip+10
 })
}

}

// вызов функции this.btnClick (e, «next») Или предыдущий за предыдущий

0 голосов
/ 13 марта 2019

Если вы посмотрите документацию для компонента Pagination по адресу https://react.semantic -ui.com / addons / pagination / , вы увидите, что вы передаете this.btnClick в onClick={this.btnClick}, когда это необходимобыть переданы в onPageChange={this.btnClick}

<Pagination
    boundaryRange={0}
    onPageChange={this.btnClick}
    defaultActivePage={1}
    ellipsisItem={null}
    firstItem={null}
    lastItem={null}
    siblingRange={1}
    totalPages={10}
/>

Параметры, которые передаются в onPageChange, таковы: onPageChange(event: SyntheticEvent, data: object)

Не ясно, разница между Item и Skip в состоянии и что выпытаются выполнить с вашей функцией btnClick.Не похоже, что вы учитываете возможность того, что вы можете щелкнуть пронумерованную страницу в компоненте разбивки на страницы вместо просто кнопок nextPage и PrevPage`.

Я предполагаю, что Item указывает текущую страницу, на которой вы хотите быть, и в этом случае внутри вашей функции btnClick вы можете получить следующую активную страницу из параметра data (это вернетномер следующей страницы с нумерацией страниц - независимо от того, нажимаете ли вы этот номер напрямую или нажимаете nextPage).

btnClick(event, data){
    const nextPage = data.activePage;
    this.setState({item: nextPage});

}
...