Question

实际上，我对ReactJS还是很陌生，在这里，当我分别单击prev或next按钮时，我尝试访问上一张和下一张图片，但是由于我不知道该值，所以我无法获得上一张图片的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");
        }
      }

DEMO

我正在尝试将我创建的this逻辑添加到上面的代码中，但是我感到困惑并且困惑如何合并到上面的代码中..

Answer 1

根据您的演示，我创建了一个具有上一个和下一个按钮的有效变体： https://jsfiddle.net/qjgka47z/4/

因此，您可以在nextClick和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 });
}

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

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

如何在React.js中的图像库中添加下一个，上一个和旋转

1 个答案: