如何在分页组件的每个页面更改时滚动到顶部？

Question

由于我的分页组件，我希望在更改页面时自动向上滚动。它工作得很好，但我想添加这个功能。我不知道该怎么做..我尝试了一个使用窗口的教程，但它不起作用，因为我没有重定向，只是一个分为几个页面的组件（事件列表）...... 谢谢！！这是我的代码：

分页组件

import PropTypes from 'prop-types';
// import { LinkContainer } from 'react-router-bootstrap';
import './pagination.scss';

const Pagination = ({ postsPerPage, totalPosts, paginate }) => {
  const pageNumbers = [];
  // eslint-disable-next-line no-plusplus
  for (let i = 1; i <= Math.ceil(totalPosts / postsPerPage); i++) {
    pageNumbers.push(i);
  }
  return (
    <nav expand="lg" id="pagination-navbar">
      <ul className="pagination">
        {pageNumbers.map((number) => (
          <li key={number} className="page-item">
            <a
              style={{ cursor: 'pointer' }}
              onClick={() => paginate(number)}
              className="page-link"
            >{number}
            </a>
          </li>
        ))}
      </ul>
    </nav>
  );
};
Pagination.propTypes = {
  postsPerPage: PropTypes.number.isRequired,
  totalPosts: PropTypes.number.isRequired,
  paginate: PropTypes.func.isRequired,

};
export default Pagination;

使用分页的文件

import { useState } from 'react';
import { useSelector } from 'react-redux';
// import react-Bootstrap's component(s)
import {
  Row,
} from 'react-bootstrap';
// import { useLocation } from 'react-router-dom';
import SearchBar from 'src/components/SearchBar';
import Pagination from 'src/components/Pagination';
import EventCard from '../EventCard';

import './eventsList.scss';

const EventsList = () => {
  // TODO code to retrieve the id with a useLocation (not found yet)
  // we use useLocation to retrieve the state of the route
  // in which we have stored genreId or regionId
  // if location is defined, take me its state
  // if the state is defined take me the region
  // console.log(location.state); => returns null
  const [currentPage, setCurrentPage] = useState(1);
  const [postsPerPage] = useState(9);

  const { eventsList } = useSelector((state) => state.events);
  // Get current posts
  const indexOfLastPost = currentPage * postsPerPage;
  const indexofFirstPost = indexOfLastPost - postsPerPage;
  const currentEvents = eventsList.slice(indexofFirstPost, indexOfLastPost);
  // Change page
  const paginate = (pageNumber) => setCurrentPage(pageNumber);
  return (
    <div>
      <SearchBar
      // we pass a string to change the title according to the page
      // we pass the length of the table to boost the results in the title
        results={eventsList.length}
        message="results"
        // genreId={genreId}
        // regionId={regionId}
      />
      <Row>
        {currentEvents.map((item) => (
          <EventCard key={item.id} {...item} />
        ))}
      </Row>
      <Pagination
        postsPerPage={postsPerPage}
        totalPosts={eventsList.length}
        paginate={paginate}

      />
    </div>
  );
};
export default EventsList;

Answer 1

您可以使用 React Refs：https://reactjs.org/docs/refs-and-the-dom.html。

您创建一个 ref，将其附加到要滚动到的元素上，并在页面更改时滚动到该元素。

类似：

const EventsList = () => {
  const pageTopRef = useRef(null);
  
  const paginate = (pageNumber) => {
    setCurrentPage(pageNumber);
    pageTopRef.current.scrollIntoView();
  };

  return (
    <div>
      ...
      <Row ref={pageTopRef}>
        {currentEvents.map((item) => (
          <EventCard key={item.id} {...item} />
        ))}
      </Row>
      ...
    </div>
  );
};

Answer 2

这似乎对我有用。 MUI v5，反应

...

const [page, setPage] = useState(props.props.pagination.page);

...

  useEffect(() => {
    window.scrollTo({
      top: 0,
      left: 0,
      behavior: 'smooth',
    });
  }, [page]);

...

  const handleChange = (event, value) => {
    setIsLoading(true);
    setPage(value);
  };

...

    <Pagination
      ...
      count={pageCount}
      page={page}
      onChange={handleChange} 
      ...       
    />