Как исправить, когда компонент React JS Pagination ничего не делает по клику? - PullRequest
Новая
       38

Как исправить, когда компонент React JS Pagination ничего не делает по клику?

0 голосов
/ 10 июля 2019

Я использую компонент JS Pagination и написал код, упомянутый в документации, но он ничего не делает по клику.

Импорт Pagination из "Reaction-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});
}

Может кто-нибудь сказать мне, что я здесь делаю неправильно, потому что я не получаю никаких результатов при нажатии на панель нумерации страниц.

1 Ответ

0 голосов
/ 10 июля 2019

Это работает для меня.Можете ли вы попробовать ниже код.

Почему вам нужно отправить data (spareParts), поскольку компонент не принимает data в качестве проп. 

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"));

Happy Coding!!!

...