如何在ReactJs中的图像库中添加下一步，预上并旋转

Question

实际上我对ReactJ非常陌生，当我分别单击Prev或下一个按钮时，我正在尝试访问上一个图像和下一个图像无法知道this.state.url

的值

class Gallery extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            showModal: false,
            pointer: 0,
            url: ""
          };
          this.openModal = this.openModal.bind(this);
          this.closeModal = this.closeModal.bind(this);
          this.nextClick = this.nextClick.bind(this);
          this.prevClick = this.prevClick.bind(this);
        }
        render() {
          return (            
            <div
              refs="gallery-container"
              className="container-fluid gallery-container"
            >
              <div className="row">
                {imgUrls.map((url, index) => {
                  return (
                    <div key={index} className="col-sm-6 col-md-3 col-xl-2">
                      <div className="gallery-card">
                        <GalleryImage
                          key={index}
                          className="gallery-thumbnail"
                          src={url}
                          alt={"Image number " + (index + 1)}
                        />
                        <span
                          className="card-icon-open fa fa-expand"
                          value={url}
                          onClick={e => this.openModal(url, e)}
                        />
                      </div>
                    </div>
                  );
                })}
              </div>
              <GalleryModal
                isOpen={this.state.showModal}
                onClick={this.closeModal}
                onNext={this.nextClick}
                onPrev={this.prevClick}
                src={this.state.url}
              />
            </div>
          );
        }
        // Function for opening modal dialog
        openModal(url, e) {
          this.setState({
            showModal: true,
            url: url
          });
        }
        // Function for closing modal dialog
        closeModal() {
          this.setState({
            showModal: false,
            url: ""
          });
        }
        nextClick() {
          alert(this.state.url);
          alert("next");
        }
        prevClick() {
          alert(this.state.url);
          alert("prev");
        }
      }

演示

我正在尝试添加我创建的逻辑中的上述代码，但是我被卡住了，我很困惑如何合并到上述代码中。

Answer 1

基于您的演示，我创建了一个使用Prev＆amp;的工作变体下一个按钮：https://jsfiddle.net/qjgka47z/4/

因此，您在NextClick＆amp;中缺少的主要元素;PrevClick动作：

nextClick() {
  const { pointer } = this.state;
  const imgLength = imgUrls.length;
  const newPointer = pointer === imgLength - 1 ? 0 : pointer + 1;
  this.setState({ pointer: newPointer });
}
prevClick() {
  const { pointer } = this.state;
  const imgLength = imgUrls.length;
  const newPointer = pointer === 0 ? imgLength - 1 : pointer - 1;
  this.setState({ pointer: newPointer });
}

基本上，我做的与您在逻辑中所做的相同：我根据提供的图像数组的长度和当前选择的图像计算了下一个/Prev图像的位置。现在，当我们单击Next/prev时，我们将所选图像的新指针设置在状态和GalleryModal组件中，我们只显示图像阵列中curernt位置的图像（这样，无需将URL保存在状态）：

<GalleryModal
  isOpen={this.state.showModal}
  onClick={this.closeModal}
  onNext={this.nextClick}
  onPrev={this.prevClick}
  src={imgUrls[this.state.pointer]}
/>