当 React JS 分页组件在点击时什么都不做时如何解决？

Question

我使用 react js 分页组件并编写了文档中提到的代码，但它在点击时什么也不做。

从“react-js-pagination”导入分页

我在这里使用它：

{this.state.spareParts.map((part, index) =>
    <Col md="3" lg="3" sm="6" xs="6" xl="3">
    	<Card>
    		<h4>
    			<b> {part.Name}  </b>
    		</h4>
    		<h4> Rs. {part.Price}  </h4>
    		<h5> By: {part.CompanyName} </h5>
    	</Card>
    </Col>
 )}

<Pagination
          data={this.state.spareParts}
              activePage={this.state.activePage}
              itemsCountPerPage={10}
              totalItemsCount={50}
              pageRangeDisplayed={5}
              onChange={this.handlePageChange} />

这里是handlePageChange函数：

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

谁能告诉我我在这里做错了什么，因为我在点击分页栏时没有得到任何结果。

Answer 1

它对我有用。你可以试试下面的代码吗？

为什么需要发送data(spareParts)，因为组件不使用data作为prop。

import React, { Component } from "react";
import ReactDOM from "react-dom";
import Pagination from "react-js-pagination";
import 'bootstrap/dist/css/bootstrap.min.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activePage: 15
    };
  }

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

  render() {
    return (
      <div>
        <Pagination
          activePage={this.state.activePage}
          itemsCountPerPage={10}
          totalItemsCount={450}
          pageRangeDisplayed={5}
          onChange={this.handlePageChange}
        />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

编码愉快！！！