React 拖拽图片，第二次拖拽的时候会被初始化

Question

使用React写的一个拖拽图片的功能，第一次拖拽的时候没有任何问题，第二次拖拽的时候，上次的图片left，top状态没有被保存，直接初始化了就和第一次拖拽一样了。

/**
 * Created by w on 2018/4/4.
 */
import React from 'react';
import ReactDOM from 'react-dom';
import './dragAbsolute.css';

class Drag extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isDragging: false,
      mouseX: 0,
      mouseY: 0,
      left: 0,
      top: 0,
      lastMovedX: 0,
      lastMovedY: 0
    };

    this.handleMouseDown = this.handleMouseDown.bind(this);
    this.handleMouseMove = this.handleMouseMove.bind(this);
    this.handleMouseUp = this.handleMouseUp.bind(this);
    this.handleMouseLeave = this.handleMouseLeave.bind(this);
  }

  componentDidMount() {
    console.log('mount');  //初始化
    this.dragDiv.style.left = '0px';
    this.dragDiv.style.top = '0px';
  }

  handleMouseDown(e) {
    let container = this.container;

    this.setState({
      isDragging: true,
      mouseX: e.clientX - container.offsetLeft,
      mouseY: e.clientY - container.offsetTop
    });
  }

  handleMouseMove(e) {

    let container = this.container;

    if (this.state.isDragging) {
      let movedX = e.clientX - container.offsetLeft - this.state.mouseX;
      let movedY = e.clientY - container.offsetTop - this.state.mouseY;

      console.log('moved', movedX, movedY);
      console.log('lastMoved', this.state.lastMovedX, this.state.lastMovedY);

      let throughX = movedX - this.state.lastMovedX;
      let throughY = movedY - this.state.lastMovedY;
      console.log('through', throughX, throughY);

      this.dragDiv.style.left = parseInt(this.state.left) + throughX + 'px';
      this.dragDiv.style.top = parseInt(this.state.top) + throughY + 'px';

      this.setState({
        left: this.dragDiv.style.left,
        top: this.dragDiv.style.top,
        lastMovedX: movedX,
        lastMovedY: movedY
      });
      console.log('state', this.state.left, this.state.top);
    }
  }

  handleMouseUp() {
    this.setState({
      isDragging: false,
    });

  }

  handleMouseLeave() {
    this.setState({
      isDragging: false
    })
  }

  render() {
    return <div>
      <div className="container"
           ref={container => {
             this.container = container
           }}>
        <div className="dragImg"
             ref={dragDiv => {
               this.dragDiv = dragDiv
             }}
             onMouseDown={this.handleMouseDown}
             onMouseMove={this.handleMouseMove}
             onMouseUp={this.handleMouseUp}
             onMouseLeave={this.handleMouseLeave}
        />
      </div>
    </div>
  }
}

ReactDOM.render(<Drag/>, document.getElementById('root'));

/*CSS*/
*{
    margin: 0;
    padding: 0;
}

.container{
    position: relative;
    width: 600px;
    height:500px;
    border: solid 1px darkturquoise;
    overflow: hidden;
    margin: 20px auto auto auto;
}

.dragImg{
    cursor: move;
    position: absolute;
    left: 20px;
    top:80px;
    width: 1805px;
    height: 770px;
    border: solid 1px lightgrey;
    background: url("./img/monitorBg.png");
    z-index: 5;
}

Answer 1

/**
 * Created by w on 2018/4/4.
 */
import React from 'react';
import ReactDOM from 'react-dom';
import './dragAbsolute.css';

class Drag extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isDragging: false,
      mouseX: 0,
      mouseY: 0,
      left: 0,
      top: 0,
      lastMovedX: 0,
      lastMovedY: 0
    };
    this.handleMouseDown = this.handleMouseDown.bind(this);
    this.handleMouseMove = this.handleMouseMove.bind(this);
    this.handleMouseUp = this.handleMouseUp.bind(this);
    this.handleMouseLeave = this.handleMouseLeave.bind(this);
  }

  componentDidMount() {
    console.log('mount'); //初始化
    this.dragDiv.style.left = '30px';
    this.dragDiv.style.top = '30px';
  }

  handleMouseDown(e) {
    const pos = ReactDOM.findDOMNode(this.container).getBoundingClientRect();
    this.setState({
      isDragging: true,
      lastMovedX: e.clientX - pos.left,
      lastMovedY: e.clientY - pos.top
    });
  }

  handleMouseMove(e) {
    const container = this.container;

    if (this.state.isDragging) {
      const movedX = e.clientX - container.offsetLeft - this.state.mouseX;
      const movedY = e.clientY - container.offsetTop - this.state.mouseY;

      const throughX = movedX - this.state.lastMovedX;
      const throughY = movedY - this.state.lastMovedY;

      this.dragDiv.style.left = this.state.left + throughX + 'px';
      this.dragDiv.style.top = this.state.top + throughY + 'px';

      this.setState({
        left: this.state.left + throughX,
        top: this.state.top + throughY,
        lastMovedX: movedX,
        lastMovedY: movedY
      });
    }
  }

  handleMouseUp() {
    this.setState({
      isDragging: false
    });
  }

  handleMouseLeave() {
    this.setState({
      isDragging: false
    });
  }

  render() {
    return (
      <div
        className="container"
        style={{ position: 'relative' }}
        ref={container => {
          this.container = container;
        }}
      >
        <div
          className="dragImg"
          ref={dragDiv => {
            this.dragDiv = dragDiv;
          }}
          onMouseDown={this.handleMouseDown}
          onMouseMove={this.handleMouseMove}
          onMouseUp={this.handleMouseUp}
          onMouseLeave={this.handleMouseLeave}
        />
      </div>
    );
  }
}

ReactDOM.render(<Drag />, document.getElementById('root'));

Answer 2

你在某个地方的操作，将state重置了。