时间戳

首页 > 解决方案 > 变量没有采用 Reactjs 中变量的初始值

reactjs - 变量没有采用 Reactjs 中变量的初始值

问题描述

我正在 reactjs 中制作图像查看器。实际上，我希望当用户单击旋转图标时，图像会旋转约 90 度。一切进展顺利，但主要问题是当我单击任何图像并旋转它并关闭它，然后如果我打开其他图像，它会采用以前的旋转值，但在我初始化时它必须为零。

class GalleryModal extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            rotation: 0
          };
          this.rotate = this.rotate.bind(this);
          this.fullScreen = this.fullScreen.bind(this);
        }

        render() {
          const { rotation } = this.state;
          if (this.props.isOpen === false) {
            return null;
          }

          return (
            <div className="modal-overlay" name={this.props.name}>
              <div className="modal-body" id="image_container">

                <img
                  className="center_image"
                  id="image"
                  src={this.props.src}
                  style={{ transform: `rotate(${rotation}deg)` }}
                />
                <a href="#" className="fullscreen button" onClick={this.fullScreen}>
                    <i className="fas fa-compress-arrows-alt"></i>
                </a>
                <a href="#" className="button" onClick={() => this.rotate()}>
                  <i className="fas fa-sync-alt" />
                </a>
                <a href="#" className="button" onClick={this.props.onPrev}>
                  <i className="fas fa-angle-left" />
                </a>
                <a href="#" className="button" onClick={this.props.onNext}>
                  <i className="fas fa-angle-right" />
                </a>
                <a
                  className="modal-close"
                  href="#"
                  onClick={this.props.onClick}
                >
                  <span className="fa fa-times" />
                </a>

              </div>
            </div>
          );
        }
        rotate() {
          let newRotation = this.state.rotation + 90;
          if (newRotation >= 360) {
            newRotation = -360;
          }
          this.setState({
            rotation: newRotation
          });
        }

        fullScreen() {
          let elem = document.getElementById("image_container");
          if (elem.requestFullscreen) {
            elem.requestFullscreen();
          } else if (elem.mozRequestFullScreen) {
            /* Firefox */
            elem.mozRequestFullScreen();
          } else if (elem.webkitRequestFullscreen) {
            /* Chrome, Safari & Opera */
            elem.webkitRequestFullscreen();
          } else if (elem.msRequestFullscreen) {
            /* IE/Edge */
            elem.msRequestFullscreen();
          }
        }
      }

Demo here这是我尝试过的，但是当我单击另一个图像或下一个/上一个图标时，它会采用以前的值，但rotation正如我声明的那样，它必须为零rotation:0。我不知道旋转错误是从哪里引起的，因为我认为我做对了。你能告诉我我做错了什么以及如何解决吗？？？？

标签： reactjs

解决方案

问题是，当您设置状态有 时rotation: 0，您正在修改Gallery组件的状态；因此，当您打开模型时，Gallery组件将自己的this.state.rotation变量设置为0.

相反，用于显示图像的旋转是GalleryModalComponent 中的旋转，永远不会再设置为0。

一种解决方案可能是将this.state.rotation变量从Gallery组件传递到GalleryModal组件。

那里是你的小提琴固定：https ://jsfiddle.net/3hywna07/

此外，在第 61 行，而不是写：

<a href="#" className="button" onClick={() => this.props.rotate()}>

写吧：

<a href="#" className="button" onClick={this.props.rotate}>

应该避免在方法中使用箭头函数，render()因为它会导致每次render()执行方法时都创建函数。

更新链接：- https://jsfiddle.net/c0qpk5wv/2/

推荐阅读