每当我单击分页编号 4、8 或 12 时，分页布局就会消失

Question

每当我单击数字 4、8、12 时，我的分页布局就会消失。知道为什么吗？页面的其他部分以正常方式加载。

---

Pagination.js

import React from 'react'
import './Pagination.css';

class Pagination extends React.Component {
    render(){
      var {pageUp, pageDown, getAmountNumber} = this.props;

      return (
        <div className="row">
            <div className="pagechange">
                <a href="#" className="pageprev" onClick={(e) => {e.preventDefault(); pageDown();}}>❮Go to previous page</a>
                <a href="#" className="pagenext" onClick={(e) => {e.preventDefault(); pageUp();}}>Go to next page❯</a>
            </div>

            <div className="pagenumbers pagination">
                <a href="#" className="pagnumber active" onClick={(e) => getAmountNumber(e)}>4</a>
                <a href="#" className="pagnumber" onClick={(e) => getAmountNumber(e)}>8</a>
                <a href="#" className="pagnumber" onClick={(e) => getAmountNumber(e)}>12</a>
            </div>
        </div>
      )
    }
}

export default Pagination

---

Pagination.css

.row{
    margin-bottom: 90px;
}

.pagechange{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 5px;
    margin-top: 5px;
}

.pageprev,
.pagenext{
    margin-left: 3px;
    margin-bottom: 3px;
    color: white;
    padding: 5px;
    box-shadow:inset 0px 1px 0px 0px #f29c93;
    background: linear-gradient(to bottom, #fe1a00 5%, #ce0100 100%);
    background-color:#ce0100;
    border-radius:6px;
    border: 1px solid #d83526;
    display:inline-block;
    cursor: pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:18px;
    font-weight:bold;
    text-decoration:none;
    text-shadow:0px 1px 0px #b23e35;
}

.pagenumbers{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.pagnumber{
    border: 1.3px solid red;
    background-color: whitesmoke;
    width: 25px;
    height: 30px;
    margin-left: 15px;
    font-weight: bold;
}

---

Allchallenges.js

import React from 'react'
import DefaultLayout from "../layout/Default"
import Challengebox from '../components/Challengebox'
import Pagination from "../components/Pagination"
import axios from "axios";
import "./Allchallenges.css"
import { faThumbsUp } from "@fortawesome/free-solid-svg-icons";
import { faThumbsDown } from "@fortawesome/free-solid-svg-icons";
import { faBalanceScale } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {Link} from "react-router-dom"

class Allchallenges extends React.Component {
    constructor() {
        super()

        this.state = {
           challenges: [],
           searchChallenges: [],
           pagepick: 4,
           page: 1
        }

        this.onDelete=this.onDelete.bind(this)
        this.sortByTitle=this.sortByTitle.bind(this)
        this.sortByDescription=this.sortByDescription.bind(this)
        this.searchChallenges=this.searchChallenges.bind(this)
        this.challengestotal=this.challengestotal.bind(this)
        this.handleLike=this.handleLike.bind(this)
        this.pageUp=this.pageUp.bind(this)
        this.pageDown=this.pageDown.bind(this)
        this.getAmountNumber = this.getAmountNumber.bind(this);
    }

    componentDidMount(){
        axios({
            method: "GET",
            url: `${process.env.REACT_APP_API_BASE}/allchallenges`,
            withCredentials: true
        })
        .then(response => {
            let challengeslist = response.data;
            this.setState({challenges: challengeslist, searchChallenges:challengeslist})
        })
        .catch(error => {
            console.log("You've made an error charles: ",error)
        })
    }

    onDelete(challengeId){
        axios
        .delete(`${process.env.REACT_APP_API_BASE}/allchallenges/${challengeId}`)
        .then(response => {
            const remainingChallenges = this.state.searchChallenges.filter(challenge => challenge._id !== challengeId)
            this.setState({searchChallenges:remainingChallenges})
        })
        .catch(err => console.log(err))
    }

    sortByTitle() {
        let challengesSortTitle = this.state.searchChallenges.sort((a,b) => {
            return a.title > b.title ? 1 : -1
        })
        this.setState({
            searchChallenges:challengesSortTitle
        })
    }

    sortByDescription() {
        let challengesSortDescription = this.state.searchChallenges.sort((a,b) => {
            return a.description > b.description ? 1 : -1
        })
        this.setState({
            searchChallenges:challengesSortDescription
        })
    }

    searchChallenges(e){ // eslint-disable-next-line
        let challengesSearch = this.state.challenges.filter(challenge => { 
            if(challenge.title){
                if(challenge.title.toLowerCase().includes(e.target.value.toLowerCase())){
                    return true 
                }   
            }
        })
        this.setState({
            searchChallenges:challengesSearch
        })
    }

    challengestotal(){
        return `${this.state.searchChallenges.length}`
    }

    handleLike(challengeId){
        const likedchallenge = this.state.challenges.find(challenge => challenge._id === challengeId)      
        likedchallenge.likes++
        this.setState({
                
        })
    }

    handleDislike(challengeId){
        const likedchallenge = this.state.challenges.find(challenge => challenge._id === challengeId)      
        likedchallenge.dislikes++
        this.setState({
                
        })
    }

    getAmountNumber(e){
        Array.from(e.target.parentElement.children).forEach((a) => a.className = "")
        e.target.className = "active"
        this.setState({
            ...this.state,
            page: 1,
            pagepick: parseInt(e.target.textContent)
        })
        console.log("getamountnumber is used here")
        console.log(this.state)
    }    

    pageUp(){
        this.setState({
            ...this.state,
            page: (this.state.challenges.length - (this.state.page * this.state.pagepick) > 0) ? this.state.page + 1 : this.state.page
        })
        console.log("pageup is used here")
        console.log(this.state)
    }

    pageDown(){
        this.setState({
            ...this.setState,
            page: ((this.state.page-1) < 1) ? 1 : (this.state.page - 1)
        })
        console.log("pagedown is used here")
        console.log(this.state)
    }


    render(){

        const start = this.state.pagepick * (this.state.page-1)
        const end = (this.state.pagepick * this.state.page)

        return (
            <DefaultLayout>
                <div className="challengeoverviewlist">
                    <h1>All challenges</h1>   

                    <div className="headers">
                        <button onClick={this.sortByTitle} className="sorttitle">
                            Sort based on TITLE
                        </button>

                        <button onClick={this.sortByDescription} className="sortdescription">
                            Sort based on DESCRIPTION
                        </button>

                        <button onClick={this.sortByDescription} className="sortdescription">
                            Sort based on DAREDEVILS
                        </button>

                        <input className="searchbox" type="text" placeholder="Search for a challenge title here..." onChange={this.searchChallenges} />

                        <p className="challengescounterbox">{this.challengestotal()} challenges</p>
                    </div>

                    <div className="challengeboxes">
                        {         
                        this.state.searchChallenges.slice(start,end).map(challenge => 
                            (
                                <div className="totalbox" key={challenge._id}>

                                    <div className="likedislikesbox">
                                        <div className="likecontainer">
                                            <div className="leftalignment"><FontAwesomeIcon icon={faThumbsUp} onClick={()=>this.handleLike(challenge._id)}/></div>
                                                <p className="likestat">{challenge.likes}</p>
                                        </div>
                                        
                                        <div className="dislikecontainer">
                                            <div className="leftalignment"><FontAwesomeIcon icon={faThumbsDown} onClick={()=>this.handleDislike(challenge._id)}/></div>
                                            <p className="dislikestat">{challenge.dislikes}</p>
                                        </div>

                                        <div className="satisfactioncontainer">
                                            <div className="leftalignment"><FontAwesomeIcon icon={faBalanceScale}/></div>
                                            <p className="satisfactionstat">{(challenge.likes/(challenge.dislikes + challenge.likes)*100).toFixed(0)}%</p>
                                        </div>
                                    </div>

                                    <Link to={`/challengedetail/${challenge._id}`}>
                                        <Challengebox 
                                            key={challenge._id} 
                                            id={challenge._id} 
                                            title={challenge.title} 
                                            description={challenge.description}
                                        />
                                    </Link>
                                
                                    <button className="deletebutton" onClick={()=> this.onDelete(challenge._id)}>
                                        Delete
                                    </button>
                                </div>
                            ))                                                                      
                        }
                    </div>
                
                    <div className="paginationresult">
                        <Pagination pageUp={this.pageUp} pageDown={this.pageDown} getAmountNumber={this.getAmountNumber} />
                    </div>    
                </div>    
            </DefaultLayout>
        )
    }
}

export default Allchallenges

Answer 1

问题出在Allchallenges 组件中的getAmountNumber 函数中。你正在做：

Array.from(e.target.parentElement.children).forEach(
    a => (a.className = "")
);

e.target.className = "active";

这基本上会用"active" 覆盖被点击元素的所有现有类名，这意味着它将丢失应用于您删除的类的所有样式。您实际上想要保留 pagenumber 类并且只切换 active 类。

您可以通过将上面的代码替换为以下代码来实现：

Array.from(e.target.parentElement.children).forEach(a => {
    a.classList.remove("active");
});

e.target.classList.add("active");

这是一个工作示例：

由于您使用的是 React，因此更优雅的方法是通过使用其状态来跟踪您的 Pagination 组件中哪个分页按钮处于活动状态。