反应：分页不能顺利进行

Question

我正在React中进行分页。我通过API从在线服务器获取数据。 API是在Loopback中构建的。我有一些关于next和previous按钮的问题。如果用户想要渲染它接下来会点击的下一页数据，我会为分页制作逻辑。如果用户想要加载上一页数据，则单击上一个按钮。使用我的逻辑“下一步”按钮工作正常，如果用户单击下一个按钮，它将呈现下一页数据，但问题是如果用户想要单击previous按钮，则加载下一页数据不像以前的页面数据。如果用户点击下一步它必须加载下一页数据或者用户想加载上一页数据它必须加载上一页用prev按钮，有人请帮助我如何制作这种类型的页码。

码

        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()}</pre>
        <button onClick={this.handleClick}>Change link</button>
      </div>
    )
  }
}


ReactDOM.render(<Example/>, document.querySelector('div#my-example' ))

Answer 1

你刚才用添加跳过的方式编写btnClick（e）：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.button单击（in，“next”）或以前的prev

Answer 2

如果你看一下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 in state之间的区别以及你想用btnClick函数完成的事情。它看起来不像是你可以点击分页组件上的编号页面而不仅仅是nextPage和PrevPage`按钮。

我将假设Item指示您想要的当前页面，在这种情况下，在您的btnClick函数中，您可以从data参数中获取下一个活动页面（这将返回下一页的分页编号 - 无论您是否直接点击该号码或点击下一页）。

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

}