阵营的onClick

Question

我已经创建了一个自定义分页元素来改变类阵营：

... 
    {this.state.displayTweets.length != 0 && <Pagination pageCount={this.state.pageCount} pagination={this.pagination.bind(this)}/>} 
... 

这是被称为当函数：只有当接收数据 我基本都在容器中分页，这将是可见的分页项目被点击：

pagination(data){ 
     if(data == -1 && offset>0){ 
      console.log("Previous") 
      offset -= perPage 
      this.setState({displayTweets: this.state.tweets.slice(offset,offset+perPage)}) 
     } else if(data == 0 && pageNumber < this.state.pageCount) { 
      console.log("Next") 
      pageNumber += 1 
      offset += perPage 
      this.setState({displayTweets: this.state.tweets.slice(offset,offset+perPage)}); 
     } else if(data > 0 && data < this.state.pageCount){ 
      console.log("Between") 
      pageNumber = data 
      offset = perPage*(data-1) 
      this.setState({displayTweets: this.state.tweets.slice(offset,perPage*data)}); 
     } 
     console.log("Page number: "+pageNumber) 
     console.log("Offset: "+offset) 
    } 

这里是实际的分页组件：

import React from 'react'; 

const PageLi = (props) => { 
    let pages = []; 
    for (let i = 1; i <= props.pageCount; i++) { 
     pages.push(<li className="page-item" onClick={() => { props.pagination(i)}} key={i}><a className="page-link">{i}</a></li>); 
    } 
    return (
     <nav aria-label="Page navigation example"> 
      <ul className="pagination"> 
       <li className="page-item" onClick={() => { props.pagination(-1)}}><a className="page-link">Previous</a></li> 
       {pages} 
       <li className="page-item"><a onClick={() => { props.pagination(0)}} className="page-link">Next</a></li> 
      </ul> 
     </nav> 
    ); 
}; 

export default PageLi; 

一切按预期工作。现在，当我点击分页项目以将课程从page-item更改为page-item-active并从先前单击的项目中删除active part时，我希望这一点。我如何在React中做到这一点？我知道我可以设置状态，但是为每个页面编号设置一个状态会很愚蠢。

Answer 1

您可以在您的状态下存储和维护当前页码，然后将其作为道具传递给PageLi组件。然后，您可以按照以下方式进行操作，根据当前页码更改班级。

let pages = []; 
for (let i = 1; i <= props.pageCount; i++) { 
    pages.push(
    <li 
     className={i === props.pageNumber ? "page-item-active" : "page-item"} 
     onClick={() => { 
     props.pagination(i); 
     }} 
     key={i} 
    > 
     <a className="page-link">{i}</a> 
    </li> 
); 
}