javascript - React-Paginate 不可点击

Question

我一直在尝试使用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

这些按钮不可点击

Answer 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。

编辑:从评论来看，具有较高 z 索引的 ui 组件位于它们上方，并且不可见/不可点击