reactjs图像滑块导航功能，似乎无法正常工作

reactjs image slider navigation function, cant seem to get it working properly

本文关键字：常工作 工作 图像 导航 功能 reactjs      更新时间：2023-09-26

我有一个简单的图像滑块，在一个数组中包含3个图像，我只想用一个可以在图像之间来回移动的功能来导航滑块，如果你点击最后一个图像上的下一个，它会带你到第一个图像，反之亦然，这是我可以做的，但它不能正常工作，相反，如果你再点击第一个图像上，它什么都不会显示，并且当你点击最后一个图像后的下一个时也不显示任何内容

constructor() {
    super()
    this.state = {
      imgArray: [ "/img/work1.jpg", "/img/work2.jpg", "/img/work3.jpg"],
      imgNo: 0,
      imgArrayLength: 2,
      current: "/img/work1.jpg",
      headlines: ["Pink Floyd Office", "Led Zeppelin Mania", "Central Perk Friends"],
      headline : "Pink Floyd Office"
    };
  }
changeImg(n){
    this.setState({
      imgNo: this.state.imgNo += n
    })
    if(this.state.imgNo > this.state.imgArrayLength){
      this.setState({
        imgNo: 0
      })
    }
    else if(this.state.imgNo < 0){
      this.setState({
        imgNo: this.state.imgArrayLength
      })
    }
    this.setState({
      current: this.state.imgArray[this.state.imgNo],
      headline: this.state.headlines[this.state.imgNo]
    })
  }
<img src="/img/slider-left.png" class="slider-arrow" onClick={this.changeImg.bind(this, -1)} />
 <img src="/img/slider-right.png" class="slider-arrow slider-right" onClick={this.changeImg.bind(this,  1)} />

您可以使用-(imgArrayLength + imgNo + n) % imgArrayLength:计算imgNo

changeImg(n) {
  const {
    imgArrayLength, imgNo
  } = this.state;
  const current = (imgArrayLength + imgNo + n) % imgArrayLength;
  this.setState({
    imgNo: current,
    current: this.state.imgArray[current],
    headline: this.state.headlines[current]
  })
}

我也会从状态中删除这些道具，因为它们是多余的：

current: this.state.imgArray[current],
headline: this.state.headlines[current]

在render方法中，使用this.state.imgArray[this.state.imgNo].

来自react文档：

setState((不会立即改变this.state，而是创建一个挂起的状态转换。调用此方法后访问this.state可能会返回现有值。

所以你第一次打电话：

this.setState({
  imgNo: this.state.imgNo += n
})

this.state.imgNo没有改变。

将您的代码更改为：

    changeImg(n){
        var imgNo; this.state.imgNo += n;
        if(imgNo > this.state.imgArrayLength){
            this.setState({
                imgNo: 0
            })
        }
        else if(imgNo < 0){
            this.setState({
                imgNo: this.state.imgArrayLength
            })
        }
        this.setState({
            current: this.state.imgArray[imgNo],
            headline: this.state.headlines[imgNo]
        })
    }
相关文章：