React-Paginate 不可点击答案

【问题标题】：React-Paginate is not clickableReact-Paginate 不可点击
【发布时间】：2019-03-04 15:22:10
【问题描述】：

我一直在尝试使用 React-paginate 库进行分页，但是，由它形成的按钮不可点击，我不明白我做错了什么
而且没有给出例子，也没有提出任何问题

使用这个分页的正确方法是什么

这是我的 App.js 的代码

    import React, { Component } from 'react';
import './App.css';
import Navbar from '../src/components/navbar/navbar'
import SearchIt from '../src/components/searchField/search'
import Container from 'react-bootstrap/Container'
import Card from '../src/components/cards/cards'
import Axios from 'axios'
import Pagination from '../src/components/pagination/paginating'

class App extends Component {
  state={
    fetchedData:[]
  }

  componentDidMount(){
    Axios.get('http://localhost:3000/1').then((responseData)=>{
      //console.log(responseData.data)
      this.setState({fetchedData:responseData.data})
    }).catch((err)=>{
      console.log(err)
    })
  }
  handlePageClicked = data => {
    let selected = data.selected;
    console.log(selected)    
  };

  render() {

    return (
      <div className="App">
        <Navbar/>
        <Container> 
          <SearchIt/>
          <Card data={this.state.fetchedData}/>
          <Pagination handlePageClick={this.handlePageClicked}/>
        </Container>
      </div>
    );

  }
}

export default App;

这里是 paginating.js 的代码

   import React,{Component} from 'react'
import ReactPaginate from 'react-paginate';
import './paginateStyle.css'


 const page = (props)=>{
     return(

      <ReactPaginate
          previousLabel={'previous'}
          nextLabel={'next'}
          breakLabel={'...'}
          breakClassName={'break-me'}
          pageCount={10}
          marginPagesDisplayed={2}
          pageRangeDisplayed={5}
          onPageChange={props.handlePageClick}
          containerClassName={'pagination'}
          subContainerClassName={'pages pagination'}
          activeClassName={'active'}
        />

     )
 }

 export default page

这些按钮不可点击

【问题讨论】：

我使用 react-paginate 做了一个快速示例，一切看起来都很好。如果您发现任何问题，您是否验证了控制台？另外，我看到您只是在单击页码时登录到控制台。你错过了什么吗？
是的，我确实错过了，具有更高 z 索引的 ui 组件在它们上方并且不可见 :-( 我浪费了 6 个小时的富有成果的一天
哦.. kk.. 至少你认出了它..
是的，感谢您努力重新创建它，如果您这样做，将标记为正确

标签： javascript reactjs pagination

【解决方案1】：

我做了一个快速的示例，它奏效了。

import ReactPaginate from 'react-paginate';

const Pagination = (props) => {
return (

<ReactPaginate
  previousLabel={'previous'}
  nextLabel={'next'}
  breakLabel={'...'}
  breakClassName={'break-me'}
  pageCount={10}
  marginPagesDisplayed={2}
  pageRangeDisplayed={5}
  onPageChange={props.handlePageClick}
  containerClassName={'pagination'}
  subContainerClassName={'pages pagination'}
  activeClassName={'active'}
  />

 )
}


class App extends Component {
 state = {
  selectedPage: 0
 }

handlePageClicked = data => {
  let selected = data.selected;
  this.setState({
    selectedPage: selected
  })
  console.log(selected)
};

render() {

return (
  <React.Fragment>
    <div>You selected:  {this.state.selectedPage}</div>

    <div className="App">
      <Pagination handlePageClick={this.handlePageClicked} />
    </div>
  </React.Fragment>
 );

 }
}

paginateStyle.css 中可能存在导致分页无法正常工作的内容或您的应用程序中的其他一些 CSS。

编辑：从 cmets 中，具有更高 z 索引的 ui 组件在它们上方并且不可见/不可点击

【讨论】：