时间戳

首页 > 解决方案 > 如何销毁和重新初始化组件以响应另一个组件中的按钮单击

reactjs - 如何销毁和重新初始化组件以响应另一个组件中的按钮单击

问题描述

我从这样的 React 教程中创建了一个分页，

 const [posts, setPosts] = useState([]); 
 const [showPerPage] = useState(6);
 const [pagination, setPagination] = useState({
   start: 0,
   end: showPerPage
 });
 const onPaginationChange = (start, end) => {
   setPagination({start: start, end: end});
 }

以上几行在我调用分页组件的主组件中，如下所示：

<Pagination showPerPage={showPerPage} onPaginationChange={onPaginationChange} totalProvider={posts.length}/>

现在我已经创建了这样的分页组件，

import React, {useState, useEffect} from 'react'

const Pagination = ({showPerPage, onPaginationChange, totalProvider}) => {
    const [counter, setCounter] = useState(1);
    useEffect(()=>{
        const value = showPerPage * counter;
        onPaginationChange(value - showPerPage, value);
    },[counter]);
    const onButtonClick = (type) => {
        if(type==='prev'){
            if(counter === 1){
                setCounter(1);
            }else {
                setCounter(counter - 1);
            }
        }else if( type=== 'next'){
            if(Math.ceil(totalProvider/showPerPage)=== counter){
                setCounter(counter);
            }else {
                setCounter(counter + 1);
            }
        }
    }
    return (
        <div className="paginationWrapper">
            <span id="prevBtn" onClick={()=>onButtonClick('prev')} className="disable">Prev.</span>
            <div className="numberOfItems">
                <span id="startCounter">{counter}</span>of<span>{Math.ceil(totalProvider/showPerPage)}</span>    
            </div>   
            <span id="nextBtn" onClick={()=>onButtonClick('next')}>Next</span>        
        </div>
    )
}


export default Pagination

这是我的设置，现在我想在单击父组件中的按钮时重置分页，因为在该按钮上单击我需要获取更多或更少的数据，在这种情况下，我的分页始终保持在我之前离开了它，我可以通过两种方式做到这一点，但无法获取代码方式：

  1. 如果我可以将计数器（分页组件中的 const ）重置为 1，单击该按钮，则可以完成，或者
  2. 如果我可以销毁组件，它的每个状态，那么它就会完成。

请帮忙，注意：我没有使用redux。

标签： reactjs

解决方案

我认为使用 ref 是最简单的方法。

import React, {userRef} from "react"
function ParentComponent() {
    const resetRef = useRef();
    const handleReset = () => {
         if (resetRef && resetReft.current) resetRef.current.resetCounter();
    }
    return <>
          <button onClick={handleReset}>Reset</button>
          <Pagination ref={resetRef} showPerPage={showPerPage} onPaginationChange={onPaginationChange} totalProvider={posts.length}/>
       </>
}

将 forwardRef 和 resetCounter() 添加到您的分页组件。

 
const Pagination = React.forwardRef(({showPerPage, onPaginationChange, totalProvider}, ref) => {
    const [counter, setCounter] = useState(1);
    useEffect(()=>{
        const value = showPerPage * counter;
        onPaginationChange(value - showPerPage, value);
    },[counter]);
    const onButtonClick = (type) => {
        if(type==='prev'){
            if(counter === 1){
                setCounter(1);
            }else {
                setCounter(counter - 1);
            }
        }else if( type=== 'next'){
            if(Math.ceil(totalProvider/showPerPage)=== counter){
                setCounter(counter);
            }else {
                setCounter(counter + 1);
            }
        }
    }
    resetCounter() {
        setCounter(1);
    }
    return (
        <div className="paginationWrapper" ref={ref}>
            <span id="prevBtn" onClick={()=>onButtonClick('prev')} className="disable">Prev.</span>
            <div className="numberOfItems">
                <span id="startCounter">{counter}</span>of<span>{Math.ceil(totalProvider/showPerPage)}</span>    
            </div>   
            <span id="nextBtn" onClick={()=>onButtonClick('next')}>Next</span>        
        </div>
    )
})


export default Pagination

推荐阅读