在数组元素之间切换 React

Question

我有一系列约会和一个反应视图，可以一次显示一个。用户可以通过单击前后箭头来浏览约会。数据看起来像这样：const arr = [    { start: 10, end: 12, id: 7532 },    { start: 11, end: 13, id: 6775 },    { start: 14, end: 15, id: 554 },    { start: 17, end: 18, id: 3232 }];我试图找出实现这一点的最佳方法。页面立即显示第一个元素，理想情况下，当所选元素为 arr[0] 时，用户将无法单击后退按钮。同样适用于点击前进。我有点困惑在这种情况下数组的索引是如何工作的，即使所选约会是数组的一部分，我似乎也得到了 -1 的索引值。此外，我不确定将当前索引保存到反应状态或将其保留在点击触发的函数中是否有意义。

Answer 1

添加一个名为 pageIndex 的状态，该状态初始化为 0，每当下一个或后退按钮被分别单击时，该状态会增加或减少。

如果 pageIndex 的值在单击返回时为 -1，则它应该禁用 - 这可以解决您所说的 arr[0] 问题。

如果 pageIndex 的值将大于 arr 的长度，则前进按钮将被禁用。

希望能给你一个思路😁

Answer 2

这是我的工作分页组件

import React from 'react';

// MATERIAL UI CORE

import IconButton from "@material-ui/core/IconButton";

// MATERIAL UI COMPONENTS

import FirstIcon from "@material-ui/icons/FirstPage";

import PrevIcon from "@material-ui/icons/ChevronLeft";

import NextIcon from "@material-ui/icons/ChevronRight";

import LastIcon from "@material-ui/icons/LastPage";

const Pagination = props => {

  const {

    num, // ARRAYS LENGTH

    current, // CURRENT PAGE

    onCurrent, // CHAGING THE CURRENT PAGE MINUS OR POSITION

    fromPage, // START OF PAGINATION

    toPage, // END OF PAGINATION - EXAMPLE 20/40 SO WERE SEEING 20 ARTICLES

    pagely // HOW MANY ITEMS PER PAGE

  } = props;

  const pages = Math.ceil(num / pagely);

  const first = current === 0;

  const last = current === pages - 1;

  return (

    <div className = "pagination">

      <div className = "icon">

        <IconButton

          onClick = {onCurrent.bind(this, 0)}

          disabled = {first}>

          <FirstIcon />

        </IconButton>

      </div>

      <div className = "icon">

        <IconButton

          onClick = {onCurrent.bind(this, Math.max(current - 1, 0))}

          disabled = {first}>

          <PrevIcon />

        </IconButton>

      </div>

      <div className = "text">

        <span>Items {fromPage + 1} - {toPage} of {num}</span>

        <br />

        <span>Page {current + 1} of {pages}</span>

      </div>

      <div className = "icon">

        <IconButton

          onClick = {onCurrent.bind(this, Math.min(current + 1, pages - 1))}

          disabled = {last}>

          <NextIcon />

        </IconButton>

      </div>

      <div className = "icon">

        <IconButton

          onClick = {onCurrent.bind(this, pages - 1)}

          disabled = {last}>

          <LastIcon />

        </IconButton>

      </div>

    </div>

  );

}

export default Pagination;

希望这可以帮助

丹尼尔