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;

希望这会有所帮助

丹尼尔

Answer 3

您走在正确的轨道上，将索引与数据分开存储没有错。这是一些入门的代码：

class MyComp extends React.Component {
  render() {
    const { data } = this.props;
    return <span>{data.id}</span>;
  }
}

class MyList extends React.Component {
  state = {
    index: 0
  };

  onPrevClick = () => {
    const { index } = this.state;
    if (index > 0) this.setState({ index: index - 1 });
  };

  onNextClick = () => {
    const { data } = this.props;
    const { index } = this.state;
    if (index < data.length - 1) this.setState({ index: index + 1 });
  };

  render() {
    const { data } = this.props;
    const { index } = this.state;
    return (
      <>
        <span onClick={this.onPrevClick}>prev</span>
        <MyComp data={data[index]} />
        <span onClick={this.onNextClick}>next</span>
      </>
    );
  }
}

codesandbox虽然很粗糙，但还是可以正常工作

Answer 4

我的英语不好，但是我想你会理解的... 变量名称是随机的，因为我不是一个有组织的人，但是您可以修复它

import React, { Component } from 'react'; import { render } from 'react-dom'; import Hello from './Hello'; import './style.css';

class App extends Component {   constructor() {
    super();
    this.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 } ];   this.h1 = document.createElement("h1")   }   componentDidMount(){
    this.h1.innerText = this.arr[0].id
    document.body.appendChild(this.h1)
    document.getElementById("back").disabled = true
    this.numbe = {
      number: 0,
      change: function(number){
        this.number = number
      }
    }
    }   render() {
    return (
      <div>   <button onClick={() => this.ir("back")} id="back">Back</button>   <button onClick={() => this.ir("foward")} id="foward">Foward</button>

      </div>
    );   }   ir(teste){
    if(parseInt(this.h1.innerText) === this.arr[this.arr.length - 2].id){
      document.getElementById("foward").disabled = true
    }
    else{
      document.getElementById("foward").disabled = false
      document.getElementById("back").disabled = false
    }
    if(parseInt(this.h1.innerText) === this.arr[1].id){
      document.getElementById("back").disabled = true
    }
    else{
      document.getElementById("back").disabled = false
      document.getElementById("back").disabled = false
    }
    if(teste === "foward"){
        var result = this.numbe.number + 1
        this.numbe.change(result)
        this.h1.innerText = this.arr[this.numbe.number].id
    }
    else{

        var result = this.numbe.number - 1
        this.numbe.change(result)
        this.h1.innerText = this.arr[this.numbe.number].id
    }   } }

render(<App />, document.getElementById('root'));

在数组元素之间切换

4 个答案: