Question

我有一个简单的图像滑块，其中有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)} />

Answer 1

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

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]。

Answer 2

来自react documentation：

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]
        })
    }

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

2 个答案: