通過單擊組件外的按鈕將分頁重置為第一頁

Question

我正在使用 Material UI usePagination hook 創建一個自定義分頁組件，到目前為止一切順利，該功能按預期工作，但我想知道如何通過觸發不屬於部分的按鈕將分頁重置為第一頁分頁組件。

有沒有人知道如何觸發它？

這是我的組件。

import React from "react";
import PropTypes from "prop-types";
import { usePagination } from "hooks";

function arrow(type) {
  return (
    <i
      className={`fa fa-chevron-${
        type === "next" ? "right" : "left"
      } page-icon`}
    />
  );
}

function Pagination({ data, itemCount, onChange }) {
  const { items } = usePagination({
    count: Math.ceil(data.length / itemCount, 10),
    onChange
  });

  return (
    <nav aria-label="Paginator">
      <ul className="pagination-component">
        {items.map(({ page, type, selected, ...item }, index) => {
          let children;

          if (type === "start-ellipsis" || type === "end-ellipsis") {
            children = "…";
          } else if (type === "page") {
            children = (
              <button
                type="button"
                automation-tag={`page-${page}`}
                className={`page-button ${selected ? "selected" : ""}`}
                {...item}
              >
                {page}
              </button>
            );
          } else {
            children = (
              <button
                automation-tag={type}
                className="page-button"
                type="button"
                {...item}
              >
                <span className="d-none">{type}</span>
                {arrow(type)}
              </button>
            );
          }

          return (
            // eslint-disable-next-line react/no-array-index-key
            <li key={index} className="page-item">
              {children}
            </li>
          );
        })}
      </ul>
    </nav>
  );
}

我正在嘗試的是創建一個選擇組件，onChange 函數將根據選擇對數據進行排序，但是當數據排序時，我想將分頁組件返回到第一頁

const TableVizContainer = props => {
  const [currentPage, setCurrentPage] = useState(1);
  const [sortColumn, setSortColumn] = useState(1);
  const [range, setRange] = useState({
    start: 0,
    end: 25
  });

  const onChangePage = (_event, page) => {
    setCurrentPage(page);
    setRange({
      start: 25 * (page - 1),
      end: 25 * page
    });
  };

  const onSelectChange = event => {
    const { value } = event.target;
    setCurrentPage(1);
    setSortColumn(parseInt(value, 10));
  };

  return (
    <div
      className="table-viz-container container-fluid my-4 float-left"
      automation-tag={`table-viz-${automationId}`}
    >
      <div className="d-flex justify-content-between mb-3 leaderboard-meta">
        <span className="leaderboard-title">{visualization.title}</span>
        <div className="mr-5">
          <label htmlFor="sort-table-select">
            Sort By:
            <select
              id="sort-table-select"
              onChange={onSelectChange}
              value={sortColumn}
            >
              {visualization.columns.map((column, index) => {
                const uniqueId = uuidv1();
                return (
                  <option key={uniqueId} value={index}>
                    {setSelectValue(column, visualization.metrics)}
                  </option>
                );
              })}
            </select>
          </label>
        </div>
      </div>
      <div className="d-block d-sm-flex justify-content-between align-items-center my-2 px-2">
        <span className="page-items-count" automation-tag="pagination-count">
          {`Showing ${range.start === 0 ? 1 : range.start + 1} - ${
            range.end <= visualization.rows.length
              ? range.end
              : visualization.rows.length
          } of ${visualization.rows.length}.`}
        </span>
        <Pagination
          currentPage={currentPage}
          data={visualization.rows}
          itemCount={25}
          onChange={onChangePage}
        />
      </div>
    </div>
  );
};

有沒有人知道如何在不單擊組件的情況下重置分頁頁面並將其移動到第一個頁面？

Answer 1

有兩種方法。

1.傳球道具

假設您有一個名為jump()的函數，將1作為參數傳遞將重置分頁。 因此，您可以將jump函數作為屬性傳遞並在其他組件上重用它。

function jump(){
  setCurrentPage(1)
}

<MyCompnent resetPage={jump} />

// MyComponent

function MyComponent({resetPage}){
  return (
    <button onClick={resetPage(1)}></button>
)
}

2. 關於改變路線

當您的路線發生變化時，您可以重置分頁。 例如，您正在使用路由器 npm 包，並且該包有一個名為onChange或routeChangeStart的方法。 使用這些方法或在創建該方法之后，您可以實現如下所示的功能。

Router.events.on("routeChangeStart", () => {
  jump(1);
});